离开底部后做 300px 的事情

Question

我有一个代码可以在滚动到达底部之前获得 300px 时显示一些东西！当到达底部时，我想在离开底部后得到300px时去掉这个消息！

当我到达底部之前的 300px 时它完美地工作，但是当我尝试向后滚动 300px 时它不起作用。

document.addEventListener('scroll', function(event) {
  var docHeight = $(document).height();  // Document height
  var winHeight = $(window).height();    // Window height
  var minHeight = docHeight - winHeight; // Real document height
  var curHeight = $(window).scrollTop(); // Display the height according to scrolling

  $(window).scroll(function() {
    //BEFORE
    if(curHeight + 300 > minHeight) {
      document.getElementById('copyrights').innerHTML = "Welcome to bottom";
    }

    //AFTER (doesn't work)
    if(curHeight - 300 == minHeight - 300) {
      document.getElementById('copyrights').innerHTML = "Good bye";
    }
  });
});

Answer 1

在您的示例中，$(window).scrollTop() 是从 window 顶部测量的当前滚动高度。要获取从 window 底部测量的滚动位置，您可以使用 $(window).scrollTop() + $(window).height().

你可能想要这样的东西

$(window).scroll(function() {
    var bottomOfWindow = $(window).scrollTop() + $(window).height();
    if(bottomOfWindow < (document).height() - 300) {
        // you are close to the bottom
    }
});

Answer 2

你必须设置一个标志变量来保存你之前是否已经到达底部的状态，否则它会在页面加载时说再见。另外，第二个检查应该是 if (curHeight <= minHeight - 300)。所以总而言之，如下所示：

var scrolledToBottom = false;
document.addEventListener('scroll', function(event) {
  var docHeight = $(document).height();  // Document height
  var winHeight = $(window).height();    // Window height
  var minHeight = docHeight - winHeight; // Real document height
  var curHeight = $(window).scrollTop(); // Display the height according to scrolling

  $(window).scroll(function() {
    //BEFORE
    if(curHeight + 300 > minHeight) {
      document.getElementById('copyrights').innerHTML = "Welcome to bottom";
      scrolledToBottom = true;
    }

    if (scrolledToBottom) {
      //AFTER (doesn't work)
      if (curHeight <= minHeight - 300) {
        document.getElementById('copyrights').innerHTML = "Good bye";
      }
    }
  });
});

离开底部后做 300px 的事情

Do something 300px after leaves the bottom

javascript

jquery

height