Tengo un div.scroll_fixed con el siguiente CSS
.scroll_fixed { position:absolute top:210px } .scroll_fixed.fixed { position:fixed; top:0; }Estoy usando el siguiente código jQuery para configurar la clase .fixed cuando el div llega a la parte superior de la página.
var top = $('.scroll_fixed').offset().top - parseFloat($('.scroll_fixed').css('margin-top').replace(/auto/, 0)); $(window).scroll(function (event) { // what the y position of the scroll is var y = $(this).scrollTop(); // whether that's below the form if (y >= top) { // if so, ad the fixed class $('.scroll_fixed').addClass('fixed'); } else { // otherwise remove it $('.scroll_fixed').removeClass('fixed'); } });Esto funciona muy bien para la fijación de desplazamiento vertical. Pero con una pequeña ventana del navegador, el desplazamiento horizontal provoca un conflicto con el contenido a la derecha de este div fijo.
Me gustaría que el div se desplace con el contenido horizontalmente.
¿Alguien podría indicarme la dirección correcta? Todavía me estoy mojando los pies con JS/JQuery.
Básicamente, quiero que funcione como el segundo cuadro de este ejemplo .
La demostración mantiene la position:fixed y manipula la propiedad left del elemento:
var leftInit = $(".scroll_fixed").offset().left; var top = $('.scroll_fixed').offset().top - parseFloat($('.scroll_fixed').css('margin-top').replace(/auto/, 0)); $(window).scroll(function(event) { var x = 0 - $(this).scrollLeft(); var y = $(this).scrollTop(); // whether that's below the form if (y >= top) { // if so, ad the fixed class $('.scroll_fixed').addClass('fixed'); } else { // otherwise remove it $('.scroll_fixed').removeClass('fixed'); } $(".scroll_fixed").offset({ left: x + leftInit }); }); El uso leftInit tiene en cuenta un posible margen izquierdo. Pruébalo aquí: http://jsfiddle.net/F7Bme/
Probablemente ya haya seguido adelante, pero aquí hay una respuesta para cualquier otra persona que busque una solución de elemento fijo desplazable horizontalmente. Este complemento jquery fue creado para resolver este problema exacto.
Esta demostración utiliza un resumen del carrito de compras que aún se desplazará horizontalmente cuando se fije en la parte superior de la página; y también lo he usado para un encabezado sobre datos tabulares:
Demostración: http://jsfiddle.net/y3qV5/434/ (actualizado)
Complemento y fuente: https://github.com/bigspotteddog/ScrollToFixed
Uso:
$(document).ready(function() { $('#cart').scrollToFixed( { marginTop: 10 } ); });use la propiedad css position:sticky para obtenerlo.
Aquí está el artículo explicado y la demostración en vivo.
http://updates.html5rocks.com/2012/08/Stick-your-landings-position-sticky-lands-in-WebKit
el único inconveniente es la compatibilidad del navegador.