我如何知道元素是否在屏幕的低20％？

Question

有沒有一種方法可以找出，如果一個元素（如div）在屏幕的較低的20％使用Prototype可見？我不知道從哪裏開始。

感謝

Answer 1

如果我正確地理解您的要求（您的框將有它的底部或高於可視屏幕的底部，它等於或低於可見屏幕的80％最高），那麼這是怎麼了你會去做這件事。

可見屏幕的計算方法是：取document.viewport.getScrollOffsets()['top']，然後減去document.viewport.getHeight()的80％以獲得其他邊界。窗口＃滾動事件中你的元素被調查，並檢查其位置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') 
}