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.

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/