Haga que un div se adhiera a la parte superior de la pantalla si se desplazó hacia abajo

Question

Tengo un div que, cuando se carga por primera vez, está a unos 100 px de la parte superior (contiene algunos botones, etc. para la página).

Cuando un usuario se desplaza pasando, me gustaría que el div "siga" al usuario porque se adjunta a la parte superior de la pantalla. Cuando el usuario regrese a la parte superior de la página, quiero que vuelva a su posición original.

Visualization - xxxxx is the div: 

Default (page load)   User vertically scrolled well past it 
---------     --------- 
|  |     |xxxxxxx| < after div reaches top of screen when 
|xxxxxxx|     |  | page is scrolled vertically, it stays 
|  |     |  | there 
---------     --------- 

Answer 1

El truco es que debe establecerlo como posición: fijo, pero solo después de que el usuario lo haya desplazado.

Esto se hace con algo como esto, adjuntando un controlador para el evento window.scroll

// Cache selectors outside callback for performance. 
    var $window = $(window), 
     $stickyEl = $('#the-sticky-div'), 
     elTop = $stickyEl.offset().top; 

    $window.scroll(function() { 
     $stickyEl.toggleClass('sticky', $window.scrollTop() > elTop); 
    }); 

Esto simplemente agrega una clase CSS sticky cuando la página se haya desplazado más allá de ella, y elimina la clase cuando es hora de volver arriba.

Y la clase CSS se parece a este código Modificado

#the-sticky-div.sticky { 
    position: fixed; 
    top: 0; 
    } 

EDIT- para almacenar en caché los objetos jQuery, más rápido ahora.

Answer 2

Uso position:fixed; y establezca el top:0;left:0;right:0;height:100px; y usted debería ser capaz de tener que "pegarse" a la parte superior de la página.

<div style="position:fixed;top:0;left:0;right:0;height:100px;">Some buttons</div> 

Answer 3

había una previous question today (sin respuestas) que dieron un good example of this functionality. Puede comprobar el relevant source code for specifics (búsqueda de la "barra de herramientas"), pero básicamente utilizar una combinación de solución de webdestroya y un poco de JavaScript:

1. cargas de página y elemento es la posición: estática
2. El desplazamiento, la posición se mide, y si el elemento está en posición: estático y está fuera de la página, entonces el elemento se invierte a la posición: fijo.

Sin embargo, recomiendo comprobar el código fuente antes mencionado, ya que manejan algunos "errores" que quizás no pienses inmediatamente, como ajustar la posición de desplazamiento al hacer clic en los enlaces de anclaje.

Answer 4

Debería probar el plugin jQuery de waypoints.

http://imakewebthings.com/waypoints/shortcuts/sticky-elements/

creo que hace exactamente lo que quiere, y sin parpadeo. De memoria, sin embargo, no creo que funcionó bien en Mobile Safari (YMMV).

Un buen ejemplo de esto fue el New York Times recientemente:

http://www.nytimes.com/interactive/2010/11/13/weekinreview/deficits-graphic.html

El gráfico de caja en la página no se desplaza de la parte superior de la página.

Answer 5

El truco para hacer que la respuesta de infinito funcione sin parpadeo es poner la verificación de desplazamiento en otro div y luego en el que desea corregir.

basadas en el Código viixii.com utiliza Terminé usando esto:

function sticky_relocate() { 
    var window_top = $(window).scrollTop(); 
    var div_top = $('#sticky-anchor').offset().top; 
    if (window_top > div_top) 
     $('#sticky-element').addClass('sticky'); 
    else 
     $('#sticky-element').removeClass('sticky'); 
} 

$(function() { 
    $(window).scroll(sticky_relocate); 
    sticky_relocate(); 
}); 

De esta manera la función sólo se llama una vez que se alcanza el pegajoso-ancla y por lo tanto no será eliminar y añadir el' .sticky 'clase en cada evento de desplazamiento.

Ahora agrega la clase adhesiva cuando el ancla adhesiva llega a la parte superior y la retira una vez que el ancla adhesiva vuelve a la vista.

Simplemente coloque un div vacío con una clase que actúa como un ancla justo encima del elemento que desea reparar.

así:

<div id="sticky-anchor"></div> 
<div id="sticky-element">Your sticky content</div> 

Todo el crédito para el código va a viixii.com

Answer 6

he creado un plugin de jQuery para esto. Me encantaría recibir algunos comentarios ya que es el primero. https://github.com/dubroe/sticky-div