当我滚动时，我的导航栏颜色不想随 jquery 改变？
[英]My nav bar color doesn't want to change with my jquery when I scroll?
问题描述
I am having problems with my JQuery or something else which I have no idea about.
我的 JQuery 或其他我不知道的东西有问题。 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.我是个菜鸟，因为我只有 12 年级。 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 个解决方案
解决方案1
1 2019-03-10 06:20:57
Use .black{..} instead nav .black{}使用.black{..}代替nav .black{}
WHY?为什么？
for example : div p{...} - Selects all <p> elements inside <div> elements例如： div p{...} -选择<div>元素内的所有<p> <div>元素
$(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>
解决方案2
0 已采纳 2019-03-10 06:21:50
In your CSS, you have a selector like nav .black .在你的 CSS 中，你有一个像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.如果你用nav.black替换它，你将能够选择所有带有“black”类的导航元素，所以你的样式应该被应用。
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/编辑：顺便说一句，我认为您已经了解这部分，但是如果您进行了上述更改并且“半透明黑色”仍然没有在您期望的时间应用，请参阅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 .并注意if(0)计算结果为false 。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.