Question

我有一个包含顶级菜单的容器。但是当这个容器以60 px的宽度滚动时，我需要将一个类添加到顶层菜单中，但它现在不会这样做。

我有这个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);
});

滚动元素时，将类添加到元素

1 个答案: