div到达顶部时切换侧菜单

Question

所以我有一个侧菜单，当某个div到达窗口顶部时，它会切换打开。

菜单也有一个切换按钮来打开和关闭它

我遇到了一个问题，脚本在通过切换按钮手动打开菜单后，继续关闭滚动菜单。

有没有什么方法可以只在div通过屏幕顶部时打开和关闭菜单，而不是让脚本不断检查？

我的脚本：

var stickyTop = $('#section1').offset().top;
$(window).on( 'scroll', function(){
if ($(window).scrollTop() >= stickyTop) {
$('.be-toggled').removeClass('toggled');
} else {
$('.be-toggled').addClass('toggled');
}
});
});

Answer 1

将函数移到一个变量中，然后可以调用$(window(.off((来移除监听滚动事件的窗口。我的例子并不是你所需要的，但它应该在使用函数时为你提供开/关的概念。

var stickyTop = $('#section1').offset().top;
var doToggle = function() {
if ($(window).scrollTop() >= stickyTop) {
$('.be-toggled').removeClass('toggled');
} else {
$('.be-toggled').addClass('toggled');
}
$(window).off( 'scroll', doToggle);
});
$(window).on( 'scroll', doToggle);