jQuery的：當一個div是在瀏覽器窗口中可見的通知

我已經通知控制檯日誌每當給定格在瀏覽器窗口中的腳本，它是不是很漂亮，但在這裏它是：jQuery的：當一個div是在瀏覽器窗口中可見的通知

$(window).bind('scroll', function(){ 
    var $canvas = $('div#example'); 
    var pos  = $canvas.offset(); 
    var total = pos.top + $($canvas).height(); 
    var wndtop = $(this).scrollTop(); 

    if(wndtop <= pos || wndtop >= total){ 
     console.log("off screen") 
    } 
    if(wndtop >= pos || wndtop <= total){ 
     console.log("on screen") 
    } 

});

如果#div位於頁面頂部，此腳本可以正常工作，但如果它不在頁面頂部，它將始終返回「屏幕上」。我怎麼能修改這個，以便它會返回正確的信息，無論div在哪裏？

來源

2010-07-21 superUntitled

首先...有一個遞歸的$（'＃div'），就像滾動一樣，非常昂貴！請從您的滾動事件中拿出它。 – 2010-07-21 04:23:07

有沒有更好的方法來做到這一點？我知道這個災難性的代碼！ – superUntitled 2010-07-21 04:43:55

http://www.jsfiddle.net/Q7T3b/

我猜我認爲這將是一個很酷的小運動。
正常情況下，我會用某種方法（如低，高）擴展本機號對象;

但是，這似乎正在工作...雖然它沒有超出「看起來不錯」的測試; & &很髒。所以不要告訴任何人我做到了。

var canvas = $('#other'); 
var win = $(window); 

win.bind('scroll', function(){ 
    var pos = canvas.offset(); 
    var total = pos.top + canvas.height() + win.height(); 
    win.top = win.scrollTop(); 
    var d = win.height() + win.top; 

    if(pos.top < d && !(total < d)){ 
     console.log("on screen") 
    } 
});

當你在一個密集的活動，如「滾動」或「鼠標移動」運行功能，你需要確保以往任何時候都運行的是哪個在那裏儘可能靈活。 DOM查詢是任何事情，但速度很快，而且它們的開銷很大。我建議避免查詢此類事件。

來源

2010-07-21 05:55:52

順便說一下，從現在開始，請將您的JS問題與指向jsFiddle的鏈接一起發佈......它使事情變得更容易，並且迫使您將代碼降至最低。 – 2010-07-21 05:56:51

jQuery的：當一個div是在瀏覽器窗口中可見的通知

回答

相關問題