Question

我有一个背景透明的导航栏。如何在滚动后使背景变黑。

这是模板live

并且有带导航栏的html

Answer 1

使用Jquery并添加一个类

<强>的jQuery

$(window).scroll(function() {    
    var scroll = $(window).scrollTop();

    if (scroll >= 1) { // Adjust with your needs
        $(".navbar").addClass("navbar-black");
    } else {
        $(".navbar").removeClass("navbar-black");
    }
});

<强> CSS

.navbar-black{
background: #000 !important;
}

Answer 2

所以你应该能够用ScrollTop实现这个目的，类似的东西：

onscroll = function() 
    {
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        if (scrollTop > 830) 
        {
    $('.navbar').css('background-color','black');
    }
    if (scrollTop < 830) 
        {
    $('.navbar').css('background-color','transparent');
    }
}

我或许会考虑使用锚而不是绝对高度。

如果这是你想要的。：）

滚动后如何更改背景

2 个答案: