如何在滚动时更改导航栏 CSS 样式？ [复制]

Question

我正在使用 Bootstrap 4 做一个网站。导航栏的背景颜色是透明的，但是当用户向下滚动时，我希望它的背景颜色变为白色并带有柔和的过渡。相反，当导航栏返回时，我需要它的初始状态。像这样的东西： https://www.w3schools.com/w3css/tryw3css_templates_parallax.htm

我尝试过使用纯 javascript，但代码不起作用。

提前致谢！

javascript：

window.onscroll = function() {myFunction()};

function myFunction() {

    var navbarClass = document.getElementById("myNavbar").className.split(/\s+/);
    for (var i = 0; i < navbarClass.length; i++) {

        if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
            navbarClass[i].classList.add("border", "animate-top");
        } else if (navbarClass[i].classList.contains("nav")) {
            navbarClases[i].classList.toggle("nav-white");
        }
    }

}

CSS

.first > div {
    color: #fff;
}
section {
    height: 350px;   
}
.first {
    padding-top: 70px;
    background-image: url('https://picsum.photos/1920/1080/?random');
    height: auto;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.nav {
    border: 0;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.5);
}
.nav-white {
    border: 0;
    border-radius: 0;
    background: rgba(255, 255, 255, 1);
}
.nav-white .navbar-brand {
    color: black;
}
.nav-white .navbar-nav li a {
    color: black;
}
.nav-white .fa.fa-navicon {
    color: black;
}
.border {
    box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)
}
.animate-top{
    animation:animatetop 0.4s}@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}
}

HTML 导航栏

<nav class="navbar navbar-expand-lg fixed-top nav" id="myNavbar">
    <a href="#" class="navbar-brand">Menu</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Menu de Navegacion">
        <span class="navbar-toggler-icon">
            <i class="fa fa-navicon"></i>
        </span>
    </button>
    <div class="collapse navbar-collapse" id="navbar">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item">
                <a href="#" class="nav-link">TITLE 1</a>
            </li>                   
            <li class="nav-item">
                <a href="#" class="nav-link">TITLE 2</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link">TITLE 3</a>
            </li>
        </ul>
    </div>
</nav>

HTML

<section class="first row">
    <div class="col">                
        <h2>MAIN</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>      
</section>    

<section class="row">
    <div class="col">
        <h2>TITLE 1</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
</section>

Answer 1

当您使用 Bootstrap 时，您可以利用 jQuery。下面的代码是我所做的：

jQuery 根据位置切换滚动类，滚动类只是改变颜色。

 $(document).scroll(function () {
    $(".fixed-top").toggleClass('scrolled', $(this).scrollTop() >  $(".fixed-top").height());
  });

.fixed-top.scrolled {
		background-color:rgba(255,255,255,1) !important;
		transition: background-color 200ms linear;
}

Answer 2

您所拥有的看起来不错，除了我在任何地方都看不到“位置：固定”，这将迫使导航栏“卡在”屏幕顶部。