如何更改 bootstrap 导航滚动条上的文本颜色

Question

我已经尝试了好几天了，但似乎无法更改滚动条上导航栏的文本颜色。

我有一些 Javascript 和 CSS 已经在工作了，所以它改变了导航栏的背景颜色，但我一辈子都不能改变文本颜色

你会看到当页面移动 y 时是否添加和删除，我尝试添加更多 if else 语句，也尝试更改类我留在 css 中，我 link 所有附加的类到导航项，它什么都不做，但我添加了它，所以你可以看到附加到文本的内容当我检查 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

您面临两个问题：

你的CSSselect或者是错误的。您有两个 select 全导航-link，它们位于带有 scrolled class 的导航栏中。所以你必须检查 nav 元素上的 scrolled class，而不是 nav-link 元素：nav.scrolled.navbar-light .navbar-nav .active > .nav-link
Bootstrap 已经将样式应用于 nav-link 元素。在您的情况下，它优先于您的自定义 class。为防止这种情况，您可以使用 color: white !important; 设置颜色优先级。

如何更改 bootstrap 导航滚动条上的文本颜色

How to change text color on scroll for a bootstrap nav

html

javascript

css

navbar