[英]My nav bar color doesn't want to change with my jquery when I scroll?
我的 JQuery 或其他我不知道的东西有问题。 我试图让我的导航栏将颜色从白色更改为半透明的黑色。 如果我把某些东西放在错误的地方或完全添加了错误的文字，有人可以帮助解释我做错了什么吗？ 我是个菜鸟，因为我只有 12 年级。 此外，这是一个学校项目。
$(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-->
使用.black{..}代替nav .black{}
为什么？
例如： 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>
在你的 CSS 中，你有一个像nav .black这样的选择器。 这将选择具有“黑色”类的导航元素的所有后代。 如果你用nav.black替换它，你将能够选择所有带有“black”类的导航元素，所以你的样式应该被应用。
编辑：顺便说一句，我认为您已经了解这部分，但是如果您进行了上述更改并且“半透明黑色”仍然没有在您期望的时间应用，请参阅https://api.jquery.com/scrollTop /
如果滚动条在最顶部，或者元素不可滚动，则此数字将为 0。
并注意if(0)计算结果为false 。
当我通过Javascript更改ID的CSS类时，我的jQuery导航栏无法反映所做的更改。
[英]When I alter an ID's CSS class via Javascript, my jQuery nav bar doesn't reflect the change..?
滚动网站-当滚动部分通过时，我希望导航div更改颜色
[英]Scroll Website - I want my navigation div change color when scroll pass a section
想要向下滚动到顶部时更改导航链接的颜色--jquery
[英]want to change nav links color on hover when scroll down to top --jquery
如何使用我的代码无法运行的jquery更改滚动类的背景颜色？
[英]How can I change the background color of a class on scroll using jquery my code isn't working?
<a>当我点击它时如何更改标签颜色并且在我更改我的 URL 之前它不会改变</a>
[英]How to change a <a> tag color when I click on it and it doesn't change until I change my URL
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.