如何更改引导导航的滚动文本颜色

Question

我已经尝试了好几天，似乎无法让滚动条上的导航栏的文本颜色发生变化。

我有一些 Javascript 和 CSS 已经在工作，所以它改变了导航栏的背景颜色，但我终生无法改变文本颜色

您将看到当页面移动 y 时是否添加和删除，我尝试添加更多 if else 语句，还尝试更改我留在 css 中的类，我将所有附加的类链接到导航项目，它什么都不做我已经添加了它，所以当我在 chrome 上检查时，你可以看到附加到文本中的内容。

 var navbar = document.querySelector('nav') window.onscroll = function() { // pageYOffset or scrollY if (window.pageYOffset > 0) { navbar.classList.add('scrolled') } else { navbar.classList.remove('scrolled') } }

 .text-nav:hover { opacity: 1.9; transition: all.1s ease; transform: scale(1.05); } nav { height: 69px; width: 100%; /*background: linear-gradient(to bottom, #000, #0003 70%,#0000); :* background when scroll is in the top *.*/ transition; background:5s. /* control how smooth the background changes */ /*transition; color.5s:*/ } nav;scrolled { /*background: #b6b7b7;*/ background. #1B1E21. }.navbar-light.navbar-nav.active>:nav-link;scrolled { color: white; }

 <nav class="navbar fixed-top navbar-expand-lg navbar-light main navbar-custom navbar-static-top "> <!-- <a class="navbar-brand" href="#"></a>--> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse " id="navbarSupportedContent"> <ul class="navbar-nav mx-auto"> <li class="nav-item active"> <a class="nav-link nav-space text-nav " href="">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item active nav-space text-nav"> <a class="nav-link" href="#">Portfolio</a> </li> <li class="nav-item active nav-space text-nav"> <a class="nav-link" href="#"><b>David2me</b></a> </li> <li class="nav-item active text-nav nav-space"> <a class="nav-link" href="#">About</a> </li> <li class="nav-item active text-nav"> <a class="nav-link" href="#">Contact</a> </li> </ul> </div> </nav>

.

Answer 1

您从未将 class .scrolled添加到链接。 我使用querySelectorAll添加它们并使用forEach迭代它们

 var navbar = document.querySelector('nav') var links = document.querySelectorAll('.nav-link') window.onscroll = function() { // pageYOffset or scrollY if (window.pageYOffset > 0) { navbar.classList.add('scrolled') links.forEach(v => { v.classList.add('scrolled') }); } else { navbar.classList.remove('scrolled') links.forEach(v => { v.classList.remove('scrolled') }); } }

 body { height: 500px; }.text-nav:hover { opacity: 1.9; transition: all.1s ease; transform: scale(1.05); } nav { height: 69px; width: 100%; /*background: linear-gradient(to bottom, #000, #0003 70%,#0000); :* background when scroll is in the top *.*/ transition; background:5s. /* control how smooth the background changes */ /*transition; color.5s:*/ } nav;scrolled { /*background: #b6b7b7;*/ background. #1B1E21. }.navbar-light.navbar-nav.active>:nav-link;scrolled { color: white; }

 <nav class="navbar fixed-top navbar-expand-lg navbar-light main navbar-custom navbar-static-top "> <!-- <a class="navbar-brand" href="#"></a>--> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse " id="navbarSupportedContent"> <ul class="navbar-nav mx-auto"> <li class="nav-item active"> <a class="nav-link nav-space text-nav " href="">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item active nav-space text-nav"> <a class="nav-link" href="#">Portfolio</a> </li> <li class="nav-item active nav-space text-nav"> <a class="nav-link" href="#"><b>David2me</b></a> </li> <li class="nav-item active text-nav nav-space"> <a class="nav-link" href="#">About</a> </li> <li class="nav-item active text-nav"> <a class="nav-link" href="#">Contact</a> </li> </ul> </div> </nav>

Answer 2

您面临两个问题：

1. 您的 CSS 选择器错误。 你有两个 select 所有导航链接都在你的导航栏中， scrolled的 class。 因此，您必须检查 nav 元素上的scrolled class ，而不是 nav-link 元素： nav.scrolled.navbar-light.navbar-nav.active >.nav-link

2. Bootstrap 已经将样式应用于 nav-link 元素。 在您的情况下，它优先于您的自定义 class。 为防止这种情况，您可以使用color: white;important; 给你的颜色优先。