我怎么知道元素是否在屏幕的下20％？

Question

有没有办法弄清楚，如果在使用Prototype的屏幕下方20％中可以看到一个元素（如div）？我不知道从哪里开始。

由于

Answer 1

如果我正确理解您的要求（您的盒子的底部位于可见屏幕底部或上方，其顶部位于或低于可见屏幕的80％），那么您就是这样做的。

通过document.viewport.getScrollOffsets()['top']计算可见屏幕，然后减去80％的document.viewport.getHeight()以获得其他界限。在窗口#roll事件期间轮询您的元素，并使用viewportOffset()检查其位置（这将返回左上角的位置），并且元素的高度将用于其余部分。

Event.observe(window, 'scroll', check_offsets);
Event.observe(window, 'load', check_offsets);
function check_offsets(){
  var e = $('spy');
  var top = e.viewportOffset()['top'];
  var bottom = top + e.getHeight();
  var scroll = document.viewport.getScrollOffsets()['top'];
  var scroll_80 = scroll - parseInt(document.viewport.getHeight() * .8, 10);
  if(bottom <= scroll) console.log('visible');
  if(top <= scroll_80) console.log('too high')
}