Добавить класс в элемент, когда элемент прокручивается над

Question

У меня есть контейнер, содержащий верхнее меню. Но когда этот контейнер прокручивается на ширину 60 пикселей, мне нужен класс, который нужно добавить в верхнее меню, но он этого не делает.

Я это Jquery:

$(window).scroll(function() { 
    if ($('#case-container').scrollTop()>60) { 
     $('.case-header').addClass('sticky') 
    } else if ($('#case-container').scrollTop()<60) { 
     $('.case-header').removeClass('sticky') 
    } 
}); 

Как я могу это исправить, чтобы заставить его работать?

Answer 1

Элементы scrollTop не изменяются, только прокручиваемый элемент изменит scrollTop.

Обратите внимание, что для установки scrollTop, некоторые браузеры используют тело, другой HTML, поэтому обычное исправление, чтобы проверить, как например, так $('body, html').scrollTop(100), но для получения, окна (или в данном контексте this) должно работать:

$(window).scroll(function() { 
    if ($(window).scrollTop()>60) { 
     $('.case-header').addClass('sticky') 
    } else if ($(window).scrollTop()<60) { 
     $('.case-header').removeClass('sticky') 
    } 
}); 

Как Замечание, вы могли бы сократить его

$(window).on('scroll', function() { 
    $('.case-header').toggleClass('sticky', $(this).scrollTop() > 60); 
});