[英]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.