Comprobar si div es visible en la ventana?

Question

que tienen un sitio de una página con la navegación fija y utilizando un script de desplazamiento, muy similar a este: http://www.ivanjevremovic.in.rs/live/temptation/single/orange/index-cycle-slider.html

Lo que estoy buscando es una manera de comprobar en qué sección es visible en la ventana para establecer el estado activo en la navegación cuando se usa la barra de desplazamiento de los navegadores, ¿alguna idea?

Answer 1

ver el siguiente plugin de lazyload:

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

la sección que comienza con el comentario "devolver el estado del tema en relación con la visión actual" comprueba si un elemento es visible en la ventana gráfica.

Answer 2

Si está utilizando jQuery sólo tratar de comprobar la posición documento

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

por ejemplo:

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

pero los chicos en su ejemplo que no han celebrado en esto durante mucho tiempo :) simplemente alternar clases en tecleo

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

Answer 3

uso $('#element').offset().top; para detectar lado superior del elemento.

$(window).scrollTop(); para detectar la posición de desplazamiento actual.

Y $(window).height(); para detectar la altura actual de la ventana.

Y después de eso, solo necesita cálculos matemáticos simples.

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

fuente: Check if element is visible after scrolling

Answer 5

Aquí están todas las variables que necesitará ...

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 

cuando para asegurarse de que su elemento está dentro del alcance de la ventana ...

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

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