滚动时导航栏活动选项卡更改颜色 [英] Navbar active tab change color when scrolled

问题描述

我希望我的活动标签在用户滚动通过1000px时更改颜色，而在<1000px时返回原始颜色.

I would like my active tab to change colour when user scroll pass 1000px and return to original color when it's <1000px.

我尝试了下面的CSS，该CSS可以正常工作并永久更改活动标签上的背景.

I've tried the CSS below which works and changes the background on active tab permanently.

.navbar-default .navbar-nav > .active{
   background: #111;
}

.navbar-default .navbar-nav > .active > a, 
.navbar-default .navbar-nav > .active > a:hover, 
.navbar-default .navbar-nav > .active > a:focus {
    background: #111;
}

也尝试将上面的CSS和滚动功能结合起来，但是我认为我的目标不是活动div ... 如何在滚动功能中最好地将这个活动的标签类作为目标? strong>还是有更好的替代方法?

Also tried combining the CSS above and a scroll function, but I don't think I'm targeting the active div right... How can I best target this active tab class in a scroll function? Or is there a better alternative to this method?

JsFiddle: https://jsfiddle.net/Lczsjz3y/7/

JsFiddle : https://jsfiddle.net/Lczsjz3y/7/

任何帮助将不胜感激:)

Any help would be appreciated :)

推荐答案

这将起作用:

$(window).scroll(function() {  
    var scroll = $(window).scrollTop();
    if (scroll >= 1000) {
        $(".navbar").css({"background-Color": "black"});
    } else {
        $(".navbar").css({"background-Color": "yellow"});
    }
});

提琴: https://jsfiddle.net/Lczsjz3y/21/

这篇关于滚动时导航栏活动选项卡更改颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！