¿Cómo obtengo un div de posición fijo para desplazarme horizontalmente con el contenido? Usando jQuery

Question

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 de jQuery para establecer la clase .fixed cuando el div alcanza 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 choque con el contenido a la derecha de este div fijo.

Me gustaría que el div se desplace horizontalmente con el contenido.

¿Alguien podría indicarme la dirección correcta? Todavía me mojo los pies con JS/JQuery.

Básicamente quiero que funcione como la segunda caja en este example.

Answer 1

La demostración es mantener el elemento de position:fixed y la manipulación de 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 
    }); 

}); 

Usando leftInit toma un posible margen izquierdo en cuenta. Pruébelo aquí: http://jsfiddle.net/F7Bme/

Answer 2

Probablemente ya haya avanzado, pero esta es una respuesta para cualquier persona que busque una solución de elemento fijo desplazable horizontalmente. Este plugin jquery fue creado para resolver este problema exacto.

Esta demostración usa un resumen de carrito de compras que se desplazará horizontalmente cuando se lo fija en la parte superior de la página; y, también he utilizado para una cabecera por encima de los datos de cuadro:

Demostración: http://jsfiddle.net/y3qV5/434/ (actualizado)

Plugin y fuente: https://github.com/bigspotteddog/ScrollToFixed

Uso:

$(document).ready(function() { 
    $('#cart').scrollToFixed({ marginTop: 10 }); 
}); 

Answer 3

uso de la propiedad css position:sticky para conseguirlo.

Aquí está el artículo explicado y 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.