jquery toggle class on scroll

Я использую bootstrap в качестве рамки css. Я хочу иметь возможность переключать класс на этой навигационной панели, когда пользователь прокручивается мимо большого заголовка в верхней части веб-сайта.jquery toggle class on scroll

EDIT:

Я пошел полный 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 также ответил он, так что я пошел с их ответом, который был чище, чем мой имо

источник

2016-02-23 Brandon Stewart

Что такое '$ (this)', в контексте? Кстати, если вы можете показать достаточно трески, чтобы воспроизвести проблему, тогда у вас больше шансов получить полезный ответ (вместо угадываний) и не закрывать свой вопрос как «вне темы» (для того, чтобы не включать достаточный код для воспроизведения проблемы). Пожалуйста, ознакомьтесь с рекомендациями «[mcve]» для лучшего объяснения. –

@DavidThomas Я собираюсь отредактировать свое сообщение, один секунда –

try: if ($ (window) .scrollTop()> $ ('. Landing-header'). Offset(). Bottom) { $ (". Navbar ") addClass (." темнее-BG "); } else { $ (". Navbar"). AddClass ("darker-bg"); } –

Лучшим способом измерения является сравнение $(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())){

источник

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 toggle class on scroll

ответ

Смежные вопросы