为屏幕上的位置添加侦听器

Question

我想在我的网站上设置一些东西,当你在页面底部的15%内滚动时,一个元素从侧面跳出来...我不知道如何开始这里...我应该添加一个是否有滚动功能的监听器？

我正在尝试重新创建此页面底部的效果:http://www.nytimes.com/2011/01/25/world/europe/25moscow.html？ _ r = 1

更新

我有这个代码....

     console.log(document.body.scrollTop); //shows 0
     console.log(document.body.scrollHeight * 0.85); //shows 1038.7
     if (document.body.scrollTop > document.body.scrollHeight * 0.85) {
      console.log();
   $('#flyout').animate({
     right: '0'
    },
    5000,
    function() {

   });
     }

console.log()当我滚动到页面底部时,值不会改变.该页面是我的视口的两倍.

Answer 1

[ 工作演示 ]

$(document).ready(function () {
  var ROOT = (function () {
    var html = document.documentElement;
    var htmlScrollTop = html.scrollTop++;
    var root = html.scrollTop == htmlScrollTop + 1 ? html : document.body;
    html.scrollTop = htmlScrollTop;
    return root;
  })();

  // may be recalculated on resize
  var limit = (document.body.scrollHeight - $(window).height()) * 0.85;
  var visible = false;
  var last = +new Date;
  $(window).scroll(function () {
    if (+new Date - last > 30) { // more than 30 ms elapsed
      if (visible && ROOT.scrollTop < limit) {
        setTimeout(function () { hide(); visible = false; }, 1);
      } else if (!visible && ROOT.scrollTop > limit) {
        setTimeout(function () { show(); visible = true; }, 1);
      }
      last = +new Date;
    }
  });
});

Answer 2

我知道这是一个老话题,但上面收到复选标记的代码也触发了$(window).scroll()事件监听器太多次.

我猜twitter在某个方面也有同样的问题.John Resig在这里写了博客:http://ejohn.org/blog/learning-from-twitter/

$(document).ready(function(){
     var ROOT = (function () {
        var html = document.documentElement;
        var htmlScrollTop = html.scrollTop++;
        var root = html.scrollTop == htmlScrollTop + 1 ? html : document.body;
        html.scrollTop = htmlScrollTop;
        return root;
    })();

    // may be recalculated on resize
    var limit = (document.body.scrollHeight - $(window).height()) * 0.85;
    var visible = false;
    var last = +new Date;
    var didScroll = false; 

    $(window).scroll(function(){
        didScroll = true; 
    })

    setInterval(function(){
        if(didScroll){
            didScroll = false; 
            if (visible && ROOT.scrollTop < limit) {
                hideCredit(); 
                visible = false; 
            } else if (!visible && ROOT.scrollTop > limit) {
                showCredit(); 
                visible = true; 
            }
        }
    }, 30);


    function hideCredit(){
        console.log('The hideCredit function has been called.');
    }

    function showCredit(){
        console.log('The showCredit function has been called.');
    }
});

因此,两个代码块之间的区别在于调用定时器的时间和方式.在这段代码中,计时器被称为蝙蝠.因此,每30分钟,它会检查页面是否已滚动.如果它已被滚动,那么它会检查我们是否已经通过了我们想要显示隐藏内容的页面上的点.然后,如果检查为true,则调用实际函数以显示内容.(在我的情况下,我刚刚在那里打印出一个console.log.

这似乎比其他解决方案更好,因为最终函数每次迭代只调用一次.使用另一种解决方案,最终的功能被调用4到5次.这必须节省资源.但也许我错过了一些东西.