My nav bar color doesn't want to change with my jquery when I scroll?
Question
I am having problems with my JQuery or something else which I have no idea about. I'm trying to get my navbar to change color from white to a semi transparent black color. Can someone please help explain what I did wrong, if I put something in the wrong place or completely added the wrong text? I am a noob at this as I am only in 12th grade. Also, this is for a school project.
$(window).on('scroll',function(){ if($(window).scrollTop()){ $('nav').addClass('black'); } else{ $('nav').removeClass('black'); } })
*{ margin: 0; padding: 0; box-sizing: border-box; } body{ font-size: 10px; font-family:'Raleway', sans-serif; } nav{ background-color: white; position: fixed; width: 100%; height: 2.5rem; padding-top: 1rem; padding-bottom: 1rem; z-index: 5; box-shadow: 0 .1rem .3rem rgba(0, 0, 0, 0.247); } nav ul{ position: absolute; top:50%; left: 50%; transform: translate(-50%, -50%); list-style: none; white-space: nowrap; } nav li{ display: inline; padding: 2rem; font-size: 1rem; text-transform: uppercase; font-weight: bolder; } a:link{ text-decoration: none; color: black; transition: .3s ease-in-out; } a:visited{ text-decoration: none; color: black; } a:hover{ color: rgb(161, 161, 161); } nav .black{ background-color: rgba(0, 0, 0, 0.856); } nav .black ul li a{ color: white; }
<head> <link rel="stylesheet" href="style.css"> <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Neucha" rel="stylesheet"> <link rel="shortcut icon" type="image/png" href="img/logo.png"> <title>Cole Coffee - One stop shop to suite all your coffee bean needs</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> </head> <body> <nav> <ul> <li><a href="#our-products">Products</a></li> <li><a href="about.html" class="about-tab">About Us</a></li> <li><a href="contact.html" class="contact-tab">Contact Us</a></li> </ul> </nav> <!--The rest of my webpage goes here-->
2 answers
solution1
1 2019-03-10 06:20:57
Use .black{..} instead nav .black{}
WHY?
for example : div p{...} - Selects all <p> elements inside <div> elements
$(window).on('scroll',function(){ if($(window).scrollTop()){ $('nav').addClass('black'); } else{ $('nav').removeClass('black'); } }) *{ margin: 0; padding: 0; box-sizing: border-box; } body{ font-size: 10px; font-family:'Raleway', sans-serif; } nav{ background-color: white; position: fixed; width: 100%; height: 2.5rem; padding-top: 1rem; padding-bottom: 1rem; z-index: 5; box-shadow: 0 .1rem .3rem rgba(0, 0, 0, 0.247); } nav ul{ position: absolute; top:50%; left: 50%; transform: translate(-50%, -50%); list-style: none; white-space: nowrap; } nav li{ display: inline; padding: 2rem; font-size: 1rem; text-transform: uppercase; font-weight: bolder; } a:link{ text-decoration: none; color: black; transition: .3s ease-in-out; } a:visited{ text-decoration: none; color: black; } a:hover{ color: rgb(161, 161, 161); } .black{ background-color: rgba(0, 0, 0, 0.856); } .black ul li a{ color: white; } .container{ height:500px; } <head> <link rel="stylesheet" href="style.css"> <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Neucha" rel="stylesheet"> <link rel="shortcut icon" type="image/png" href="img/logo.png"> <title>Cole Coffee - One stop shop to suite all your coffee bean needs</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> </head> <body> <nav> <ul> <li><a href="#our-products">Products</a></li> <li><a href="about.html" class="about-tab">About Us</a></li> <li><a href="contact.html" class="contact-tab">Contact Us</a></li> </ul> </nav> <div class="container"></div>
solution2
0 ACCPTED 2019-03-10 06:21:50
In your CSS, you have a selector like nav .black . This selects all the descendants of nav elements with the "black" class. If you replace it with nav.black , you will be able to select all the nav elements with the "black" class, so your styling should be applied.
Edit: BTW, I think you understand this part already, but if you make the above change and the "semi transparent black color" is still not always applied at the time you expect, see https://api.jquery.com/scrollTop/
If the scroll bar is at the very top, or if the element is not scrollable, this number will be 0.
and be aware that if(0) evaluates to false .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.