divがウィンドウ内で表示可能かどうかを確認しますか？

Question

私は一定のナビゲーションで1ページのサイトを持っており、これに非常に似てスクロールスクリプト、使用して：私が探している何http://www.ivanjevremovic.in.rs/live/temptation/single/orange/index-cycle-slider.html

がアクティブ状態を設定するウィンドウに表示できるものをセクションをチェックする方法ですnavスクロールバー、任意のアイデアを使用してnav？コメント要素は、ビューポートに表示されているかどうかをチェックし、「現在のビューにアイテムの相対的なステータスを返す」で始まる

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

セクション：

Answer 1

は以下lazyloadプラグインを参照してください。

Answer 2

あなたは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"); 
    }); 

Answer 3

$('#element').offset().top;を使用して要素の上面を検出します。

$(window).scrollTop();現在のスクロール位置を検出します。

および$(window).height();は、現在のウィンドウの高さを検出します。

この手順を実行すると、実際に簡単な計算が必要になります。

Answer 4

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

ソース：次に

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 

は、あなたの要素がウィンドウの範囲内にあることを確認するために Check if element is visible after scrolling

Answer 5

ここ

あなたが必要とするすべての変数がある... ...

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リファレンス：

• http://api.jquery.com/offset/
• http://api.jquery.com/height/
• http://api.jquery.com/scrollTop/