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.

score 23 · Accepted Answer · answered Jan 13 '11 at 02:53

23

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/

answered Jan 13 '11 at 02:53

Andrew Whitaker

124,656
32
289
307

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/](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? – jfeust Jan 13 '11 at 03:37
@jfeust: Interesting, I'll play around with it and see what I can come up with. – Andrew Whitaker Jan 13 '11 at 13:45
Amazing, Thanks alot – Sruit A.Suk Sep 20 '17 at 04:33

score 21 · Answer 2 · edited Jul 22 '13 at 20:57

21

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

edited Jul 22 '13 at 20:57

Petr Peller

8,581
10
49
66

answered Aug 30 '11 at 14:39

bigspotteddog

1,449
13
14

Jsfiddle above works flawlessly on Chrome 29.0.1547.66, so the glitch in Chrome was fixed I suppose – Dejv Sep 09 '13 at 12:52

kongaraju · Answer 3 · 2014-06-26T13:19:01.967

8

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.

edited Jun 26 '14 at 13:19

answered Sep 14 '12 at 10:26

kongaraju

9,344
11
55
78

3

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 – xmojmr Jun 25 '14 at 16:56
`position: sticky;` is a clean solution. There are good polyfills that make it work in Chrome too. – Duvrai Mar 16 '16 at 14:45
2018: `position: sticky` works nicely and is well supported unless you want to use it for `` or `` – David Sep 18 '18 at 14:37
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`. – carandraug Nov 18 '22 at 16:19

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

3 Answers3

Linked