为屏幕上的位置添加侦听器 [英] Adding listener for position on screen

问题描述

我想在我的网站上设置一些东西，当你在页面底部的15％内滚动时，一个元素从侧面跳出来......我不知道如何开始这里...应该我为滚动函数添加了一个监听器？

I'd like to set something up on my site where when you scroll within 15% of the bottom of the page an element flyouts from the side... I'm not sure how to get started here... should I add a listener for a scroll function or something?

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

I'm trying to recreate the effect at the bottom of this page: http://www.nytimes.com/2011/01/25/world/europe/25moscow.html?_r=1

更新

我有这个代码....

I have this code....

     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（）值不会改变。该页面是我的视口的两倍。

the console.log() values aren't changing when I scroll to the bottom of the page. The page is twice as long as my viewport.

推荐答案

[工作演示]

[Working Demo]

$(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;
    }
  });
});

这篇关于为屏幕上的位置添加侦听器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！