javascript - 当 div 滚动到 View 中时提醒用户

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/

我将 id 添加到 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 容差。如果我是你，我会用一个 bool 值来改进这个东西，该 bool 值检测底部 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
    }
    [...]