Question

我希望我的导航栏一旦滚动到容器div或更高位置，它就会具有黑色背景。

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

Answer 1

您也许可以：

听滚动事件
当滚动大于某个值（例如您的容器）时，将CSS规则放到导航栏$(".acetrnt-stickynav-transparent").css('background','black');

当滚动小于某个值时，进行相反的操作

$(function(){
    $(window).scroll(function(){
    var aTop = 50; //or $("#MycontainerId").heigth();
    if($(this).scrollTop()>=aTop){
        alert('Scroll is over 50px.');
        // instead of alert you can colorize you nav bar
        $(".acetrnt-stickynav-transparent").css('background','black');
    } else {
        $(".acetrnt-stickynav-transparent").css('background','none');
        }
    });
});

Answer 2

在您的情况下，document上的滚动事件应该可以工作，并获得导航div的outerHeight，并检查文档滚动的顶部位置是否大于或等于导航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>

Answer 3

这是我尝试过的方法，它可以正常工作，因此每当我滚动时，我的代码都会在导航栏中添加一个“黑色”类，每当我回到顶部时，“当我不滚动时”我的代码就会删除该类“黑色”。因此，首先，您需要在样式表中为“黑色”类设置样式，然后使用jQuery。

nav.black{
    background-color: rgba(0, 0, 0, 0.8);
    height: 100%;
}

nav.black ul li a{
    color: #fff;
}

滚动显示的jQuery代码添加类“ black”，否则删除类“ black”。

$(window).on("scroll", function() {
    if ($(window).scrollTop()) {
        $("nav").addClass("black");
    }
    else {
        $("nav").removeClass("black");
    }
});

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

3 个答案: