javascript - posicionamiento - Haga que un div se adhiera a la parte superior de la pantalla si se desplaza hacia abajo más allá de
posicionar div abajo (6)
Esta pregunta ya tiene una respuesta aquí:
Tengo un div que, cuando mi página se carga por primera vez, está a unos 100 px desde 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, ya que 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
--------- ---------
Creé un plugin jQuery para esto. Me encantaría recibir algunos comentarios ya que es el primero. https://github.com/dubroe/sticky-div
Deberías probar el plugin de waypoints jQuery.
http://imakewebthings.com/waypoints/shortcuts/sticky-elements/
Creo que hace exactamente lo que quieres, y sin parpadeo. De memoria, sin embargo, no creo que funcionó bien en Mobile Safari (YMMV).
Un buen ejemplo de esto fue recientemente en el New York Times:
http://www.nytimes.com/interactive/2010/11/13/weekinreview/deficits-graphic.html
El gráfico de cuadro en la página no se desplaza fuera de la parte superior de la página.
El truco es que tienes que 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 al 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 desplazó más allá de ella y elimina la clase cuando se realiza una copia de seguridad.
Y la clase CSS se ve así
#the-sticky-div.sticky {
position: fixed;
top: 0;
}
EDITAR - Código modificado para almacenar en caché objetos jQuery, ahora más rápido.
El truco para hacer que la respuesta de infinito funcione sin el parpadeo es poner el control de desplazamiento en otro div luego el que desea haber arreglado.
Derivado del código que usa viixii.com , 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 forma, la función solo se llama una vez que se llega al anclaje adhesivo y, por lo tanto, no se eliminará y se agregará la clase ".sticky" en cada evento de desplazamiento.
Ahora agrega la clase adhesiva cuando el ancla adhesiva llega a la parte superior y la elimina 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.
Al igual que:
<div id="sticky-anchor"></div>
<div id="sticky-element">Your sticky content</div>
Todo el crédito por el código va a viixii.com
Hubo una pregunta anterior hoy (sin respuestas) que dio un buen ejemplo de esta funcionalidad . Puede consultar el código fuente relevante para obtener información específica (buscar "barra de herramientas"), pero básicamente usan una combinación de la solución de webdestroya y un poco de JavaScript:
- Cargas de página y elemento es posición: estático
- En 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, recomendaría consultar el código fuente mencionado anteriormente, ya que manejan algunos "errores" en los que quizás no pienses inmediatamente, como ajustar la posición de desplazamiento al hacer clic en los enlaces de anclaje.
position:fixed; uso position:fixed; y establecer la top:0;left:0;right:0;height:100px; y deberías poder "pegar" en la parte superior de la página.
<div style="position:fixed;top:0;left:0;right:0;height:100px;">Some buttons</div>