Sprawdź, czy element div jest widoczny w oknie?

Question

Mam witryny jednej strony ze stałym i nawigacji za pomocą skryptu przewijania, bardzo podobny do tego: http://www.ivanjevremovic.in.rs/live/temptation/single/orange/index-cycle-slider.html

Co szukam jest sposobem, aby sprawdzić, co sekcja jest widoczny w oknie, aby ustawić stan aktywny w nawigacji podczas korzystania z paska przewijania przeglądarek, jakichkolwiek pomysłów?

Answer 1

patrz poniższy LazyLoad wtyczki:

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

odcinek, który zaczyna się od komentarza „powrót status pozycji w stosunku do bieżącego widoku” sprawdza, czy element jest widoczny w rzutni.

Answer 2

Jeśli używasz jQuery po prostu spróbować, aby sprawdzić pozycję dokumentu

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

na przykład:

$(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'); 
} 

ale faceci w swoim przykładzie nie odbyło się to przez długi czas :) oni po prostu przełączyć zajęcia na kliknięcia

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

Answer 3

Korzystanie $('#element').offset().top; wykrycia elementów górny bok.

$(window).scrollTop(); do wykrywania aktualnej pozycji przewijania.

I $(window).height(); do wykrywania aktualnej wysokości okna.

Po tych czynnościach potrzebne są tylko proste obliczenia matematyczne.

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

źródło: Check if element is visible after scrolling

Answer 5

Oto wszystkie zmienne które musisz ...

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 

Następnie upewnić się, że znajduje się w zasięgu elementem okna jest ...

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 reference:

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