Question

我正在尝试在滚动动画完成后显示div，并在向上/向下滚动页面时隐藏它。这是我的尝试：

$('#cta').on('click', function(e) {
    e.preventDefault();
    $('#layer, #servicesContent').addClass('active');

    var position = parseInt($('#services').offset().top);
    $('html, body').animate({
        scrollTop: position - 100
    }, 'slow', function() {
        $(window).bind('scroll', function() {
            $('#layer, #servicesContent').removeClass('active');
        });
    });
});

它不起作用。动画完成后删除活动类，而不是滚动移动有什么想法？
提前致谢

Answer 1

不完全确定原因，但显然需要大约20毫秒的窗口退出scroll状态，至少在Chrome上，在Windows上。或者它可能是一个jQuery技巧，可以更快地启动20ms的动画功能，所以感觉更自然。（人类的眼睛和头脑会建立连接，花费很少的时间，也许他们会考虑到这一点）。

无论如何，为了确保在scroll结束后绑定，请给它一个完整的100ms以完成并在之后绑定：

＆＃13;

$('#cta').on('click', function(e) {
  e.preventDefault();
  $('#layer, #servicesContent').addClass('active');

  var position = 120;
  $('html, body').animate({
    scrollTop: position - 100
  }, 'slow', function() {
    setTimeout(function(){
      $(window).bind('scroll', function() {
        $('#layer, #servicesContent').removeClass('active');
      });
    },100)
  });
});

＆＃13;

working fiddle

请注意我已将值硬编码为position，因为我的示例中未定义#services。

另请注意，在scroll上隐藏事件在可用性方面是一个非常糟糕的主意。用户可能想要滚动以便他们更好地查看div或完整地阅读它，但是他们最终会隐藏它，这会很烦人。我至少会检查滚动事件的最小速度或距离，以便隐藏屏幕上的元素。

如何在滚动动画后将滚动事件附加到窗口

1 个答案: