jquery - 一旦将其导航到容器div上，请将导航栏背景更改为黑色

这是我正在工作的网站。 http://www.acetronaut.com/

我希望我的导航栏是透明的，一旦它滚动到容器div及之后，它就会具有黑色背景。

我真的不知道从哪里开始使用jquery。

最佳答案

document上的滚动事件应适合您的情况，并获取nav div的outerHeight并检查文档滚动顶部的位置是否大于或等于nav div的值（高度）。如果条件为addClass("acetrnt-stickynav-color")，否则为removeClass("acetrnt-stickynav-color")

var navbar = $(".acetrnt-stickynav-transparent");

$(document).scroll(function() {
    var position = $(document).scrollTop(),
        header = navbar.outerHeight();

    if(position >= header) {
      navbar.addClass("acetrnt-stickynav-color");
    }
    else {
      navbar.removeClass("acetrnt-stickynav-color");
    }
});

.acetrnt-stickynav-transparent {
    padding: 10px;
    width: 100%;
    text-align: center;
    position: fixed;
    height: 5%;
    top: 0;
    color: #000;
}

.container {
    margin-top: 100px;
    background: green;
    padding: 30px;
    height: 500px
}

.acetrnt-stickynav-color {
    background: black;
    color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="acetrnt-stickynav-transparent">Navbar</div>
<div class="container"></div>