向下滚动时添加导航栏的类/更改css属性？答案

【问题标题】：Adding a class/changing css property of navbar upon scrolling down?向下滚动时添加导航栏的类/更改css属性？
【发布时间】：2016-12-04 06:53:26
【问题描述】：

我的导航栏的背景颜色在标题中是透明的。但是当我向下滚动并且导航栏点击下一部分时，我希望它的背景颜色变为黑色。我试过的代码不起作用。请看一下，看看我错在哪里？谢谢！

HTML：

<div class="header" id="header">
     <div class="container">

         <div class="img"><img src="img.jpg">      
         <button><a role="button" href="#about">&darr;</a></button>

     </div>
 </div>




<div class="about" id="about">
        <div class="container">
            <div class="row text-center top">
                <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
            </div>
        </div>
    </div>

CSS：

.navbar-default {
    background-color: transparent;
    padding: 20px 0;
    text-transform: uppercase;
    border: none;
}

.nav-bg-black {
    background-color: #000;
}

jQuery:

$("#about").waypoint(function(direction){
       if(direction == "down"){
           $(".navbar-default").css("background-color", "#000");
       } else {
           $(".navbar-default").css("background-color", "transparent");
       }
    }, {
            offset: '60px'
    });

和

$("#about").waypoint(function(direction){
       if(direction == "down"){
           $(".navbar-default").addClass("nav-bg-black");
       } else {
           $(".navbar-default").removeClass("nav-bg-black");
       }
    }, {
            offset: '60px'
    });

【问题讨论】：

.navbar-default 不会出现在您的标记中。会不会是这个问题？
你能把它放在一个 jsfiddle 或类似的东西里吗？

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

如果您使用引导程序，则可以使用 class .navbar-inverse

这是我尝试过的示例，它正在工作链接：https://jsfiddle.net/ye7z26Lx/4/

代码更改：

 $(function(){    
    $("#about").waypoint(function(direction){
       if(direction == "down"){
           $(".navbar-default").addClass("navbar-inverse");
       } else {
           $(".navbar-default").removeClass("navbar-inverse");
       }
    }, {
            offset: '60px'
    });

  })

【讨论】：

【解决方案2】：

试试这个代码

var waypoint = new Waypoint({
    element: $("#about"),
    handler: function (direction) {
        if (direction == "down") {
            $(".navbar-default").css("background-color", "#000");
        } else {
            $(".navbar-default").css("background-color", "transparent");
        }
    },
    offset: '60px'
});

【讨论】：