滾動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切換類

回答

相關問題