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

jquery prev

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

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

¿Podría alguien señalarme en la dirección correcta? Todavía me mojo los pies con JS / JQuery.

Básicamente quiero que funcione como el segundo cuadro en este example .

Answer 1

La demostración mantiene la position:fixed del elemento position:fixed y manipulando 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 de leftInit tiene en cuenta un posible margen izquierdo. 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 del carrito de compras que se desplazará horizontalmente cuando se lo arregle en la parte superior de la página; y, también lo he usado para un encabezado sobre los 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 } );
});

Answer 3

use la position:sticky propiedad css position:sticky para obtenerlo.

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.