javascript - 解除绑定(bind)滚动功能

Question

5 秒后，当用户滚动到页面的特定部分时，我将折叠模块(使用 Bootstrap)。问题是，当您手动单击按钮再次折叠时，此函数仍然会触发，而我不希望出现这种行为。

基本上，我希望此函数仅在用户滚动到页面上的特定元素后触发一次。我该如何去做呢？

$(window).on('scroll', function(){
    var scroll = $(window).scrollTop();
    var objectSelect = $('#whatsNextGhost');
    var objectPosition = objectSelect.offset().top;
    var collapseAccordion = function() {
        if (scroll > objectPosition) {
            $('#whatsNextSectionContent').collapse('hide');
        }
    };

    setTimeout(collapseAccordion, 5000);
});

Answer 1

我为你创建了一个小 fiddle :

https://jsfiddle.net/1j790jxb/

在滚动时，我只需将一些内容记录到控制台:

$(window).on('scroll',function(){
  console.log('scroll attached');
});

当我点击按钮(带有 ID 按钮)时，我会分离滚动:

$('#button').on('click', function(event){
  $(window).off('scroll');
});

正如您在 Fiddle 中看到的:单击按钮后，控制台中不再显示任何内容。

您可能还想看看:为(滚动)事件和 requestAnimationFrame 命名空间:

• https://api.jquery.com/event.namespace/
• https://www.paulirish.com/2011/requestanimationframe-for-smart-animating/