当scrollTop小于“n”并且用户仅向下滚动时如何重复jQuery滚动功能

Question

我有一个在页面加载时位置固定的容器，它的高度等于窗口高度。它必须定位为“固定”（？），因为当滚动大于 1px 时会弹出带有文本的叠加层，并且它们的高度都必须等于窗口高度。 如果 scrollTop 大于窗口高度的一半，页面会自动滚动到下一部分，并从该容器中删除固定位置。

代码如下：

$(window).on('scroll.a', function () {

var windowHeight = $(window).outerHeight();
var scrollTopMask = $(window).scrollTop();
var slideAfter = windowheight/2;

if (scrollTopMask > slideAfter) {
  $('.container').addClass('not-fixed');
    $('html, body').animate({
      scrollTop: $('#nextSection').offset().top
    }, 700);

    $(window).off('scroll.a');

} else if (scrollTopMask < slideAfter) {
  $('.container').removeClass('not-fixed');
}});

问题是我必须off()滚动函数才能在函数执行并满足条件后继续滚动。当scrollTop === 0 和用户再次向下滚动时，有什么方法可以重新启动功能？

Answer 1

如果用户滚动过去slideAfter，只需使用一个标志来存储状态。如果是false，则继续执行逻辑，否则直接返回：

var hasScrolledPast = false;
$(window).on('scroll.a', function () {

  var windowHeight = $(window).outerHeight();
  var scrollTopMask = $(window).scrollTop();
  var slideAfter = windowheight/2;

  if (scrollTopMask > slideAfter) {

    // If user has already scrolled past, don't do anything
    if (hasScrolledPast)
      return;

    $('.container').addClass('not-fixed');
      $('html, body').animate({
        scrollTop: $('#nextSection').offset().top
      }, 700);

    // Update flag so that we know user has scrolled past
    hasScrolledPast = true;

  } else if (scrollTopMask < slideAfter) {
    $('.container').removeClass('not-fixed');

    // Reset scroll past flag
    hasScrolledPast = false;
  }

});

---

建议：您的用户可能会加载他/她的滚动位置已经超出您的阈值的页面。但是，如果发生这种情况，则不会更新标志，因为尚未在视口上触发滚动事件。在这种情况下，我建议将逻辑抽象为一个函数，您只需将该函数用作滚动事件的回调，并在页面加载时调用它：

var hasScrolledPast = false;
var scrollLogic = function() {
  var windowHeight = $(window).outerHeight();
  var scrollTopMask = $(window).scrollTop();
  var slideAfter = windowheight/2;

  if (scrollTopMask > slideAfter) {

    // If user has already scrolled past, don't do anything
    if (hasScrolledPast)
      return;

    $('.container').addClass('not-fixed');
      $('html, body').animate({
        scrollTop: $('#nextSection').offset().top
      }, 700);

    // Update flag so that we know user has scrolled past
    hasScrolledPast = true;

  } else if (scrollTopMask < slideAfter) {
    $('.container').removeClass('not-fixed');

    // Reset scroll past flag
    hasScrolledPast = false;
  }
};

// Evaluate on scroll
$(window).on('scroll.a', scrollLogic);

// Evaluate on page load/DOM ready
scrollLogic();