¿Cómo se fijan los elementos en la parte superior de la página solo en el desplazamiento?

http://www.devbridge.com/projects/autocomplete/jquery/

La barra lateral de la izquierda inicialmente se imprime en la parte inferior de la página, pero cuando se desplaza, se mueve hacia arriba y luego permanece en lugar de desaparecer más allá de la parte superior de la ventana gráfica. He visto esto mucho.

preguntado el 22 de mayo de 12 a las 20:05

3 Respuestas

Cuando la parte superior de desplazamiento de la página es mayor que la posición superior del div que desea desplazar, asigne a ese div una posición fija para que siga al usuario hacia abajo en la página.

Ejemplo:

Aquí he codificado la posición superior porque nunca cambia en mi caso de uso.

var $window = $(window), $menu = $("#menu");
$window.bind('scroll', function() {
    var pos = +$window.scrollTop();
    if (pos > 284) {
        $menu.addClass("fixed");
    }
    else {
        $menu.removeClass("fixed");
    }
}).trigger("scroll");​

donde fixed es una clase que establece la posición en fixed y top en 0.

contestado el 22 de mayo de 12 a las 20:05

Es posible que desee echar un vistazo a pegajoso.js Complemento jQuery. Maneja esas cosas bastante bien si no lo necesita demasiado elegante.

El principio detrás de esto es verificar el desplazamiento en el contenedor de un elemento. Se pone fija una vez que alcanza un cierto nivel de desplazamiento.

contestado el 22 de mayo de 12 a las 20:05

Enlace genial. Gracias +1. (Ayudándote a conseguir lo anónimo aquí;)) - mkk

Gracias por eso, me alegro de haber podido ayudar;) - Tharabas

Usando jQuery, agrega un scroll-Listener al documento:

$(document).scroll(function() {

});

Dentro de esa función, verifica si el scrollHeight del documento es más grande que la posición y del elemento:

if($(document).scrollTop() < $('.sidebar').offset().top) {
    // here you change the css attributes position to fixed and top to 0
    $('.sidebar').css('position', 'fixed').css('top', 0);
} else {
    // change the position of the element to relative (default)
    $('.sidebar').css('position', 'relative');
}

Esto casi funciona, pero debido a que siempre verifica la posición del elemento fijo, la posición y siempre es 0. Para que funcione, solo tiene que guardar la posición y predeterminada. Este es el código, que también estoy usando:

var initial_y = $('.sidebar').offset().top;

$(document).scroll(function() {
    $e = $('.sidebar');
    if(initial_y - $(document).scrollTop() <= 0) {
        $e.css('position', 'fixed').css('top', 0);
    } else {
         $e.css('position', 'relative');
    }
});

contestado el 22 de mayo de 12 a las 20:05

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.