div - offset jquery scroll
¿Cuál es la forma más simple de jQuery de tener una div ''position: fixed''(siempre en la parte superior)? (6)
En un proyecto, a mi cliente le gustaría una caja flotante en otro div, así que utilizo la propiedad CSS de margen superior en lugar de arriba para que mi casilla flotante permanezca en su matriz.
Soy relativamente nuevo en jQuery, pero hasta ahora lo que he visto me gusta. Lo que quiero es que un div (o cualquier elemento) esté en la parte superior de la página como si "position: fixed" funcionara en cada navegador.
No quiero algo complicado. No quiero hacks CSS gigantes. Yo preferiría si solo usar jQuery (versión 1.2.6) es lo suficientemente bueno, pero si necesito jQuery-UI-core, entonces está bien también.
He intentado con $ ("# topBar"). ScrollFollow (); <- pero eso va lento ... Quiero que algo aparezca realmente arreglado.
Para aquellos navegadores que sí admiten "posición: fija", simplemente puede usar javascript (jQuery) para cambiar la posición a "fijo" al desplazarse. Esto elimina la inquietud cuando se desplaza con las soluciones $ (ventana) .scroll (función ()) enumeradas aquí.
Ben Nadel lo demuestra en su tutorial: Creación de un elemento a veces fijo de posición con jQuery
Para cualquiera que todavía esté buscando una solución fácil en IE 6. Creé un plugin que maneja la posición IE 6: problema solucionado y es muy fácil de usar: http://www.fixedie.com/
Lo escribí en un intento de imitar la simplicidad de belatedpng, donde los únicos cambios necesarios son agregar el script e invocarlo.
Usando este HTML:
<div id="myElement" style="position: absolute">This stays at the top</div>
Este es el javascript que quieres usar. Adjunta un evento al desplazamiento de la ventana y mueve el elemento hacia abajo hasta donde se haya desplazado.
$(window).scroll(function() {
$(''#myElement'').css(''top'', $(this).scrollTop() + "px");
});
Como se señala en los comentarios a continuación, no se recomienda adjuntar eventos al evento de desplazamiento: a medida que el usuario se desplaza, se dispara MUCHO y puede causar problemas de rendimiento. Considere usarlo con el complemento antirrebote / acelerador de Ben Alman para reducir la sobrecarga.
Enfoque HTML / CSS
Si está buscando una opción que no requiera mucho JavaScript (y todos los problemas que la acompañan, como las llamadas a eventos de desplazamiento rápido), es posible obtener el mismo comportamiento agregando un contenedor <div> y un par de estilos Observé un desplazamiento mucho más suave (sin elementos rezagados) cuando utilicé el siguiente enfoque:
HTML
<div id="wrapper">
<div id="fixed">
[Fixed Content]
</div><!-- /fixed -->
<div id="scroller">
[Scrolling Content]
</div><!-- /scroller -->
</div><!-- /wrapper -->
CSS
#wrapper { position: relative; }
#fixed { position: fixed; top: 0; right: 0; }
#scroller { height: 100px; overflow: auto; }
JS
//Compensate for the scrollbar (otherwise #fixed will be positioned over it).
$(function() {
//Determine the difference in widths between
//the wrapper and the scroller. This value is
//the width of the scroll bar (if any).
var offset = $(''#wrapper'').width() - $(''#scroller'').get(0).clientWidth;
//Set the right offset
$(''#fixed'').css(''right'', offset + ''px'');
});
Por supuesto, este enfoque podría modificarse para desplazarse por regiones que ganan / pierden contenido durante el tiempo de ejecución (lo que daría como resultado la adición / eliminación de barras de desplazamiento).
¡Hermosa! Su solución fue 99% ... en lugar de "this.scrollY", utilicé "$ (window) .scrollTop ()". Lo que es aún mejor es que esta solución solo requiere la biblioteca jQuery1.2.6 (no se necesitan bibliotecas adicionales).
La razón por la que quería esa versión en particular es porque eso es lo que se envía con MVC actualmente.
Aquí está el código:
$(document).ready(function() {
$("#topBar").css("position", "absolute");
});
$(window).scroll(function() {
$("#topBar").css("top", $(window).scrollTop() + "px");
});