¿Cómo consigo que un div de posición fija se desplace horizontalmente con el contenido? Uso de jQuery

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 el .se corrigió la clase 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 causa un choque con el contenido a la derecha de este div fijo.

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

Podría alguien señalarme en la dirección correcta. Aun mojarme los pies con JS / jQuery.

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

Author: jfeust, 2011-01-13
Source

3 answers

La demo mantiene la propiedad position:fixed del elemento 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
    });

});

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

 23
Author: Andrew Whitaker,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-01-13 02:53:28

Probablemente ya haya pasado página, pero aquí hay una respuesta para cualquier otra persona que busque una solución de elemento fijo desplazable horizontalmente. Este plugin jquery fue creado para resolver este problema exacto.

Esta demostración utiliza un resumen del carrito de compras que todavía se desplazará horizontalmente cuando se fija a la parte superior de la página; y, también lo he utilizado para un encabezado sobre los datos tabulares:

Demo: http://jsfiddle.net/y3qV5/434 / (actualizado)

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

Uso: 

$(document).ready(function() {
    $('#cart').scrollToFixed( { marginTop: 10 } );
});
 21
Author: bigspotteddog,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-07-22 20:57:28

Use la propiedad css position:sticky para obtenerla.

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.

 9
Author: Konga Raju,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-06-26 13:19:01