2012-09-19 11 views
5

Estoy tratando de ejecutar algún script cuando div llega a cierto punto cuando se desplaza. Hay una navegación fija y cuando el usuario se desplaza por la ventana, supongo que debe cambiar el nombre de navegación una vez que llegue cerca del navegador. Estoy usando la función $. (Window) .scroll pero solo verifica la posición div una vez y no actualizo el valor. Cómo hacer que scroll controle el tamaño de la ventana cada 5-10 px para que no ocupe demasiada memoria/procesamiento. El código está configurado en: http://jsfiddle.net/rexonms/hyMxq/Cómo obtener el valor de posición div superior mientras se desplaza

HTML

<div id="nav"> NAVIGATION 
    <div class="message">div name</div> 
</div> 
<div id="main"> 
<div id="a">Div A</div> 
<div id ="b"> Div B</div> 
<div id ="c"> Div C</div> 
</div>​ 

CSS

#nav { 
    height: 50px; 
    background-color: #999; 
    position:fixed; 
    top:0; 
    width:100%; 

} 

#main{ 
    margin-top:55px; 
} 
#a, #b, #c { 
    height:300px; 
    background-color:#ddd; 
    margin-bottom:2px; 
} 

SCRIPT

$(window).scroll(function() { 

    var b = $('#b').position(); 

    $('.message').text(b.top); 

    if (b.top == 55) { 
     $('.message').text("Div B"); 
    } 
});​ 
+0

Es, de hecho, verificar la posición de 'b' en cada incremento de desplazamiento, pero la posición de' b' en relación con el documento nunca cambia. Ver la respuesta de @j08691. – Shmiddty

Respuesta

8

Prueba este jsFiddle example

$(window).scroll(function() { 
    var scrollTop = $(window).scrollTop(), 
     divOffset = $('#b').offset().top, 
     dist = (divOffset - scrollTop); 
    $('.message').text(dist); 
    if (b.top == 55) { 
     $('.message').text("Div B"); 
    } 
});​ 

Su código original solo estaba comprobando la posición del div en relación con la parte superior del documento que nunca cambia. Necesita calcular en la cantidad de desplazamiento en que ha incurrido la ventana y calcular en consecuencia.

También tenga en cuenta la diferencia entre los métodos de jQuery .position() y .offset(). El método .position() nos permite recuperar la posición actual de un elemento en relación con el elemento primario desplazado. Contraste esto con .offset(), que recupera la posición actual relativa al documento.

+0

Además, 'b.top == 55' nunca será verdadero. – Shmiddty

+0

@Shmiddty - cierto, pero eso simplemente se convertiría en 'if (dist == 55)'. – j08691

+0

Dudo que sea la intención de lo que el OP intenta hacer. Creo que probablemente debería ser 'if (dist <55)' – Shmiddty

Cuestiones relacionadas