檢查div是否在窗口中可見？

我有一個頁面的網站有固定的導航和使用滾動腳本，非常類似於這樣：http://www.ivanjevremovic.in.rs/live/temptation/single/orange/index-cycle-slider.html 檢查div是否在窗口中可見？

我正在尋找的是一個方法來檢查哪些部分是在設定活動狀態的窗口查看在瀏覽器上使用瀏覽器滾動條時，有什麼想法？

來源

2011-11-13 Ashley Graham

看到下面的lazyload插件：

http://plugins.jquery.com/files/jquery.lazyload.js__6.txt

與註釋開始部分「返回相對於當前視圖項目的狀態爲」檢查是否一個元素是在視口中可見。

來源

2011-11-13 21:00:48

如果您正在使用jQuery只是嘗試檢查文件位置

$('html').position().top;

例如：

$(document).bind("scroll", checkLink); 

function checkLink(){ 

    /* Position will checked out after 1 sec when user finish scrolling */ 
    var s = setTimeout(function(){ 

    var docHeight = $('html').position().top; 
    var allLinks = $('.navigation a'); 

    if (docHeight < 0 && docHeight <= -1000) { 

     allLinks.removeClass('active'); 
     $('a.firstlink').addClass('active'); 

    } else 
    if (docHeight < -1000 && docHeight <= -2000) { 

     allLinks.removeClass('active'); 
     $('a.secondlink').addClass('active'); 

    } else { /* .... */ } 

    $(document).bind("scroll", checkLink); 
    }, 1000); 

    $(document).unbind('scroll'); 
}

，但在你的榜樣球員還沒有很長一段時間內保持在這個:)他們只需點擊切換類

$('#navigation').localScroll(); 
    $('#navigation li a').click(function() { 
     $('#navigation li a').removeClass("active"); 
     $(this).addClass("active"); 
    });

來源

2011-11-13 21:02:37 Maksym

使用$('#element').offset().top;檢測元素頂端。

$(window).scrollTop();檢測當前滾動位置。

和$(window).height();檢測當前窗口高度。

然後，你實際上只需要一些簡單的數學計算。

來源

2011-11-13 21:09:32 ValeriiVasin

function isScrolledIntoView(elem) 
{ 
    var docViewTop = $(window).scrollTop(); 
    var docViewBottom = docViewTop + $(window).height(); 

    var elemTop = $(elem).offset().top; 
    var elemBottom = elemTop + $(elem).height(); 

    return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom)); 
}

來源：Check if element is visible after scrolling

來源

2011-11-13 21:48:15 bravedick

這裏有你需要的所有變量...

var $myElt  = $('.myElement');  // whatever element you want to check 
var $window  = $(window);   // the window jQuery element 
var myTop  = $myElt.offset().top; // the top (y) location of your element 
var windowTop = $window.scrollTop();   // the top of the window 
var windowBottom = windowTop + $window.height(); // the bottom of the window

然後確保你的元素是窗口的範圍內......

if (myTop > windowTop && myTop < windowBottom) { 
    // element is in the window 
} else { 
    // element is NOT in the window 
    // maybe use this to scroll... 
    // $('html, body').animate({scrollTop: myTop}, 300); 
}

jQuery參考：

來源

2012-10-23 20:51:23 Luke

檢查div是否在窗口中可見？

回答

相關問題