¿Cuál es la forma más simple de jQuery de tener una div 'posición: fija' (siempre en la parte superior)?

Question

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 $ ("# topBar"). ScrollFollow(); < - pero eso va lento ... Quiero que algo realmente arreglado.

Answer 1

Utilizando este código HTML:

<div id="myElement" style="position: absolute">This stays at the top</div> 

Este es el código JavaScript que desea utilizar. 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ñaló en los comentarios a continuación, no es recomendable adjuntar eventos para el evento scroll - como el usuario se desplaza, se dispara mucho, y puede causar problemas de rendimiento. Considere usarlo con el complemento debounce/throttle de Ben Alman para reducir la sobrecarga.

Answer 2

¡Hermoso! 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"); 
}); 

Answer 3

En un proyecto, mi cliente le gustaría una caja flotando en otro div, así que usar la propiedad CSS margin-top en lugar de la parte superior con el fin de mi estancia caja flotante en su padre.

Answer 4

Para aquellos navegadores que admiten "posición: fija", simplemente puede usar javascript (jQuery) para cambiar la posición a "fija" al desplazarse. Esto elimina la inquietud cuando se desplaza con las soluciones $ (ventana) .scroll (función()) enumeradas aquí.

Ben Nadel demuestra esto en su tutorial: Creating A Sometimes-Fixed-Position Element With jQuery

Answer 5

Para cualquier persona sigue buscando una solución fácil en IE 6. He creado un plugin que se encarga de la posición IE 6: fijo problema 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.

Answer 6

Enfoque HTML/CSS

Si usted está buscando una opción que no requiere mucho JavaScript (y y todos los problemas que vienen con él, tales como llamadas de eventos de desplazamiento rápido), es posible obtener el mismo comportamiento agregando un contenedor <div> y un par de estilos.Me di cuenta de desplazamiento mucho más suave (no hay elementos en declive) cuando utilicé el siguiente enfoque:

JS Fiddle

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).