Fixed Position div Vertical Only

Question

I have a current web build with a right sidebar that is a fixed position. I have tried to positioning from the right but don't want it overlapping other divs content.

What I am looking for is to have the content scrollable horizontally to the right when it is out of the viewport window. Any help would be greatly appreciated.

similarly to this: http://demo.rickyh.co.uk/css-position-x-and-position-y/ however I can not get this working.

This has been solved by alternative method. Thanks for those who actually considered helping.

Your demo page shows three different things. Which one are you looking to do? — Sparky, Jun 09 '11 at 04:27
It's a fixed position div... why do you have a `float:left;` in there? — Sparky, Jun 09 '11 at 04:42

score 22 · Answer 1 · answered Oct 18 '12 at 16:04

22

Keep the fixed div.

And have the following javascript code which will take care of horizontal moving.

$(window).scroll(function(){
  $('.fixed_div').css('left',-$(window).scrollLeft());
});

answered Oct 18 '12 at 16:04

Vimalkumar Kalimuthu

611
6
10

Great answer. Was looking for it for days. – Faisal Mq Oct 12 '13 at 22:47

score 1 · Answer 2 · answered May 20 '11 at 04:58

1

then add one more property in #sidebar

#sidebar {
width:400px;
height:550px;
padding:10px;
float:left;
text-transform:uppercase;
position:fixed;
left:835px;
overflow:scroll-x;
}

answered May 20 '11 at 04:58

Tushar Ahirrao

12,669
17
64
96

yeah that doesn't work its a fixed positioned div it will require more than CSS I am positive of that. – user720033 May 21 '11 at 03:07

score 0 · Answer 3 · answered Jun 09 '11 at 04:31

That example site is using more than just css to generate that effect. It is also using a MooTools plugin: ScrollSpy. http://davidwalsh.name/mootools-scrollspy

View the source at http://demo.rickyh.co.uk/css-position-x-and-position-y/ to see the scripting and the full css.

Fixed Position div Vertical Only

3 Answers3

Linked