How to make a position: fixed horizontal scroll div

Question

I have a div with the position: fixed, as shown below.

I want it to snap vertically, but I want it to scroll horizontally with the rest of the content (note the horizontal scrollbar).

Is this possible with CSS? Or do I need Javascript (in this case, how could I do this)?

Answer 1

Old question, but I was also looking for a solution and found a nice, simple jquery solution, and thought that someone might find it useful if nothing else:

$(window).scroll(function(){    $('#header').css('left', originalLeft - $(this).scrollLeft()); }); 

with the title being a div, and originalLeft is, well, the starting left: position. This also works if someone scrolls and then scales so that he will go wherever you want.

Answer 2

You need javascript. Here you can read the tutorial (with mootools): http://www.rickyh.co.uk/css-position-x-and-position-y/ . Here's a similar question resolved with jquery: CSS: fixed position on the x axis, but not y?

Answer 3

you can do it yourself css:

 <div style="width:250px; height:250px; border:solid;overflow:scroll; overflow-y:hidden"> <div style="width:500px; height:500px; border:solid;"></div> </div>