滚动jquery切换类

我使用bootstrap作为我的CSS框架。我希望能够在用户滚动浏览网站顶部的大标题图片时切换该导航栏上的课程。滚动jquery切换类

编辑：

我去全DERP ...所以我喝了些咖啡，想通了这一点。现在，如果它做的最好的办法，不知道，但这里是我有什么，和它的作品..

$(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

清洁剂去

来源

2016-02-23 Brandon Stewart

在上下文中，$（this）是什么？顺便说一句，如果你能够显示足够的鳕鱼来重现问题，那么你就有更多的机会接受有用的答案（而不是猜测），并且不会将你的问题作为“脱离主题”而关闭（因为没有足够的代码来重现问题）。请参阅“[mcve]”指南以获得更好的解释。 –

@DavidThomas我要编辑我的帖子，一秒 –

尝试：if（$（window）.scrollTop（）> $（'。landing-header'）。offset（）。bottom）{ $（“。导航栏 “）addClass（” 较暗-BG“）; （“。navbar”）。addClass（“darker-bg”）;其他{ } } –

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

$(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())){

来源

2016-02-23 21:39:10

你应该使用'$（this）.scrollTop（）' –

是的，我最终修复它，你的看起来更干净，所以我用你的结尾:)谢谢 –

您可以切换上课的时候有这样的地方滚动：

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

这里是jsfiddle。

来源

2016-02-23 22:01:23 NiKoLaPrO

滚动jquery切换类

回答

相关问题