Question

我使用bootstrap作为我的css框架。一旦用户滚过网站顶部的大标题图像，我希望能够在该导航栏上切换一个类。

编辑：

我全力以赴...所以我喝了更多的咖啡，并想出了这个。现在，如果它是最好的方式，不确定，但这是我拥有的，它的工作..

$(window).scroll(function() {

    if ($(".navbar").offset().top + $(".navbar").outerHeight(true) > $('.landing-header').outerHeight(true)) {
        $(".navbar").addClass("darker-bg");
    } else {
        $(".navbar").removeClass("darker-bg");
    }

});

@SetSailMedia也回答了这个问题，所以我选择了他们的答案，这比我的imo更干净

Answer 1

更好的衡量方法是在$(this).scrollTop事件期间比较$(window).scroll()。

$(window).scroll( function( e ){ 
    if( $(this).scrollTop() > $('.landing-header').offset().top ){
        $(".navbar").addClass("darker-bg");
    } else {
        $(".navbar").removeClass("darker-bg");
    }
});

原谅我，这个答案的第一篇文章保留了你原来的.offset().bottom财产，而这个财产并不存在。我已更新为.offset().top。如果要对元素的底部进行测量，请将该行替换为：

    if( $(document).scrollTop() > ($('.landing-header').offset().top + $('.landing-header').outerHeight()) ){

Answer 2

使用以下内容滚动某处时，您可以切换类：

$(window).scroll(function() {    
var scroll = $(window).scrollTop();
if (scroll >= 1) {
    $(".header").addClass("change");
} else {
    $(".header").removeClass("change");
}
});

这是jsfiddle。

滚动时jquery切换类

2 个答案: