Question

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

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'
    });

Answer 1

如果您使用的是bootstrap，则可以使用class .navbar-inverse

以下是我尝试过的样本，它正在运行链接：https://jsfiddle.net/ye7z26Lx/4/

代码更改：

Child

Answer 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'
});

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

2 个答案: