jQuery根据滚动位置添加类答案

【问题标题】：jQuery add classes based on scroll positionjQuery根据滚动位置添加类
【发布时间】：2018-04-19 20:10:56
【问题描述】：

我正在尝试创建一个 jQuery sn-p，它使我能够根据用户当前的滚动位置向 div 添加 4 个不同的类。

所需的状态是： 1.用户在页面顶部 2.用户在页面底部 3. 用户向下滚动 4. 用户向上滚动

在下面的代码中，我实现了数字 1 和 2，但无法让 3 和 4 工作。

有人可以帮忙吗？谢谢。

// Add/remove classes to navigation based on position
var scrollPosition = $(window).scrollTop();

$(window).bind( 'load scroll', function(){

    // User is at bottom of window
    if($(window).scrollTop() + $(window).height() === $(document).height()) {
       $('#global-header').removeClass().addClass('at-bottom');
    // User is at top of window
    } else if ($(window).scrollTop() === 0) {
        $('#global-header').removeClass().addClass('at-top');
    } else {
        $('#global-header').removeClass();
    }
});

【问题讨论】：

#3 和 #4 将涉及捕获先前的滚动位置，在滚动事件之间保留它，并将其与新的滚动位置进行比较以了解方向。
stackoverflow.com/questions/9144560/…的可能重复
@Taplar - 你能帮忙解决这个问题吗？

标签： jquery scroll

【解决方案1】：

在这里，您有一个工作解决方案捕获了先前的解决方案（如 @Taplar 在 cmets 中所建议的那样）：

// Add/remove classes to navigation based on position
var scrollPosition = $(window).scrollTop();

var threshold = 12;
var hideHeaderOnScrollDelay = 200;
var lastScrollPosition = 0;
$(window).bind('load scroll', function() {

  // User is at bottom of window
  if ($(window).scrollTop() + $(window).height() >= $(document).height()) {
    $('#global-header').removeClass().addClass('at-bottom');
    // User is at top of window
  } else if ($(window).scrollTop() === 0) {
    $('#global-header').removeClass().addClass('at-top');
  } else {
    if ($(window).scrollTop() - lastScrollPosition > threshold) {
      $('#global-header').removeClass().addClass('at-bottom');
    } else if (lastScrollPosition - $(window).scrollTop() > threshold) {
      $('#global-header').removeClass().addClass('at-top');
    }
  }

  lastScrollPosition = $(window).scrollTop();
});

#global-header {
  position: fixed;
  width: 100%;
  height: 60px;
  background-color: #006688;
  color: white;
  text-align: center;
  line-height: 60px;
  display: none;
}

#global-header.at-top,
#global-header.at-bottom {
  display: block;
}

#global-header.at-bottom {
  bottom: 0px;
}

#content {
  height: 600px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="global-header">HEADER</div>

<div id="content"></div>

【讨论】：

非常感谢，效果很好！我已经简化以适合我的问题，因为我不需要自动隐藏标题。我还想保留这些课程，直到另一个课程变得活跃。谢谢！
嗨@raul.vila - 在我的回答中，你能准确解释 var lastScrollPosition = 0;和 lastScrollPosition = $(window).scrollTop();是做？尽管我知道它们是必需的，但我想确切地解释它们的用途。谢谢！
@dungey_140 这是simple way to detect the scrolling direction。滚动事件没有关于它的信息（滚轮事件有，但不适用于光标或 pageUp/pageDown 导航），因此您可以将当前位置与前一个位置进行比较，以查看用户的去向。对0 的第一次初始化是因为页面在顶部加载（无论如何在再次触发load 事件时设置该值），然后我们在每次滚动事件后保持其值更新。
@dungey_140 我已更新我的答案并删除了setTimeout，因此它符合您的要求。如果是这种情况，请随意标记为已解决。
最后想一想，是否可以添加一个“滚动阈值”以仅在用户滚动超过 100 像素时才激活向上滚动和向下滚动类？

【解决方案2】：

感谢@raul.vila 的工作解决方案。这个答案是一个简化版本，目的是添加 4 个类，.at-top、.at-bottom、.scrolling-up 和 .scrolling-down。它还会保留这些类，直到另一个类激活为止。

// Add/remove classes to navigation based on position
var lastScrollPosition = 0;

$(window).bind('load scroll', function() {
    // User is at top of window
    if ($(window).scrollTop() === 0) {
        $('#global-header').removeClass().addClass('at-top');
    // User is at bottom of window
    } else if ($(window).scrollTop() + $(window).height() >= $(document).height()) {
        $('#global-header').removeClass().addClass('at-bottom');
    // User is scrolling down
    } else if (lastScrollPosition < $(window).scrollTop()) {
        $('#global-header').removeClass().addClass('scrolling-down');
    // User is scrolling up
    } else {
        $('#global-header').removeClass().addClass('scrolling-up');
    }

    lastScrollPosition = $(window).scrollTop();
});

【讨论】：