jquery - 滚动元素时向元素添加类

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，一些浏览器使用 body，其他 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);
});