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

您所看到的一切都很好，只是我在任何地方都看不到“位置：固定”，这将迫使导航栏“卡在”屏幕顶部。

如何更改滚动条上的导航栏CSS样式？

2 个答案: