How do I get a fixed position div to scroll horizontally with the content? Using jQuery

Question

I have a div.scroll_fixed with the following CSS

.scroll_fixed {
    position:absolute
    top:210px

}
.scroll_fixed.fixed {
    position:fixed;
    top:0;
} 

I'm using the following jQuery code to set the .fixed class when the div reaches the top of the page.

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');
    }
});

This works great for the vertical scroll fixing. But with a small browser window, horizontal scrolling causes a clash with content to the right of this fixed div.

I would like the div to scroll with the content horizontally.

Could anyone point me in the right direction. Still getting my feet wet with JS/JQuery.

I basically want it to work like the second box in this example.

Kidding

Answer 1

The demo is keeping the element's position:fixed and manipulating the left property of the element:

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
    });

});

Using leftInit takes a possible left margin into account. Try it out here: http://jsfiddle.net/F7Bme/

Anatola

Thanks, that's basically the functionality I want. Unfortunately i have my div nested in a fixed width centered container. Once the .fixed class kicks in the layout gets all messed up. The fixed div no longer follows the movement of the centered layout on window resizing. Not sure I can't get around this. See my response http://jsfiddle.net/35nyK/2/. When your first load and try resizing the red box moves properly. Once you scroll and try resizing, the layout is all messed up. Is there anyway to handle the positioning relative to that centered container? – Kidding

@jfeust: Interesting, I'll play around with it and see what I can come up with. – Anatola

Amazing, Thanks alot – Congressman

Answer 2

You have probably moved on by now, but here is an answer for anyone else looking for a horizontally scrollable fixed element solution. This jquery plugin was created to solve this exact problem.

This demo uses a shopping cart summary that will still scroll horizontally when fixed to the top of the page; and, I have also used it for a header above tabular data:

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

Plugin and source: https://github.com/bigspotteddog/ScrollToFixed

Usage:

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

Stearn

Jsfiddle above works flawlessly on Chrome 29.0.1547.66, so the glitch in Chrome was fixed I suppose – Custer

Answer 3

use css property position:sticky to get it.

Here is the article explained and live demo.

http://updates.html5rocks.com/2012/08/Stick-your-landings-position-sticky-lands-in-WebKit

the only drawback is browser compatibility.

Pasturage

As of today, the sticky demo does not work even in latest Google Chrome, so it does not seem to be useful answer anymore. Good link but I'm voting -1 – Whisky

position: sticky; is a clean solution. There are good polyfills that make it work in Chrome too. – Seema

2018: position: sticky works nicely and is well supported unless you want to use it for <thead> or <tr> – Outpouring

The live demo is no longer up and from the description of the article, it only showcases vertical scrolling. The question specifically asks about horizontal scrolling which seems to be tricky with position: sticky. – Deadline