javascript - 到达页面顶部某个元素时如何添加class并删除？

Question

这是我的代码:

jQuery(document).ready(function($){
    $(window).on('scroll', function(){
        if($(window).scrollTop() >= $('#element').offset().top){
            $('.menu').addClass('addclass');
        }
    });
});

当到达页面顶部的 id = "element" 并进一步滚动到底部时，它会将 addclass 添加到菜单。

但是当 id = "element" 再次位于页面顶部下方时，如何删除 addclass。

Answer 1

只需使用 toggleClass 或 removeClass:)

jQuery(document).ready(function($){
    $(window).on('scroll', function(){
        if($(window).scrollTop() >= $('#element').offset().top){
            $('.menu').addClass('addclass');
        }
        else 
        {
            $('.menu').toggleClass('addclass');
            //or use $('.menu').removeClass('addclass');
        }
 });
});