Question

我正在尝试在用户向下滚动到特定div时执行功能/提醒用户，然后他们滚动到页面底部。当用户滚动到底部并返回到顶部时，我能够发出警报，但不知道如何指定用户在折叠下方滚动（到中间部分）。到目前为止，我有以下内容：

HTML

<div class="container top">TOP</div>
<div class="container middle">Middle</div>
<div class="container bottom">Bottom</div>

的jQuery

$(function () {
    var $win = $(window);

    $win.scroll(function () {
        if ($win.scrollTop() == 0) {
            alert("USER SCROLLED TO TOP");
        } else if ($win.height() + $win.scrollTop() == $(document).height()) {
            alert("USER SCROLLED TO BOTTOM");
        }
    });
});

JSFIDDLE：LINK

Answer 1

https://jsfiddle.net/xsLx9ojs/1/

我将ids添加到html div：

<div id="top" class="container top">TOP</div>
<div id="bottom" class="container bottom">BOTTOM</div>

然后我添加一个条件来检测滚动时底部div在用户屏幕中出现的时间：

$(function () {

      var $win = $(window);

      $win.scroll(function () {
          if ($win.scrollTop() == 0) {
              console.log("USER SCROLLED TO TOP");
          } else if ($win.height() + $win.scrollTop() >= $('#top').height() - 50 
                    && $win.height() + $win.scrollTop() <= $('#top').height() + 50) {
              console.log("TRANSITION BETWEEN THE TWO DIVS");
          } else if ($win.height() + $win.scrollTop() == $(document).height()) {
              console.log("USER SCROLLED TO BOTTOM");
          }
      });

  });

滚动检测不是因为鼠标滚轮的“跳跃”而导致的。所以我添加了100px容差。如果我是你，我会用一个布尔值来改进这个东西，它检测是否已经给出了底部div的警告，所以函数不会在每个滚动中触发，如下所示：

    [...]
    if ($win.scrollTop() == 0) {
        //top reached
    } else if ($win.height() + $win.scrollTop() >= $('#top').height()) {
        //alert! bottom div appeared while scrolling bottom!
        //deal with this with a boolean
    } else if ($win.scrollTop() <= $('#top').height()) {
        //alert! bottom div disappeared while scrolling top!
        //deal with this with a boolean
    } else if ($win.height() + $win.scrollTop() == $(document).height()) {
        //bottom reached
    }
    [...]

Answer 2

问题的一部分是$(document).height()的值可能永远不会通过滚动获得，因为页面中的元素会影响实际文档高度与用户能够滚动的内容。

您可以找到底部容器的位置，如此

$('.bottom').position();

但这只会给你元素在其父元素中的位置。然后，您需要计算相对于每个父母和祖父母的偏移量（如果适用）。

同样，您可以查看getBoundingClientRect function：

$('.bottom')[0].getBoundingClientRect();

查看图书馆Waypoints以查看“现成的”版本。

更新1 ：对于你的JSFiddle示例，请记住Waypoints需要触发一个元素才能触发（这是默认情况下 - 您可以使用offset调整此行为。）

See my JSFiddle here where我已经使每个div更大，以允许窗口滚动传递，基于你的JSFiddle。

当div已滚动到视图

2 个答案: