1

I want to create a menu bar that stays vertically in place when you scroll up and down the screen, but if the user scrolls left and right, i want the menu bar to move left and right with the rest of the content.

For example, if the user is on the home page and decides to scroll down to read the announcements. I would want the left menu bar to stay in place. but lets say the user zooms up on our webpage so the entire page doesnt fit on the screen. If the user decides to scroll all the way to the right side of the page, i would want the menu bar to disappear along with the other content on the very left of the page.

Is there a way to do this with only css? enter image description here

anc1revv
  • 1,563
  • 7
  • 24
  • 42
  • I'll see if I can whip something up, but I'm not sure if it is possible with *just* CSS...however, if you're not opposed to using a lil javascript...I think you could look at http://stackoverflow.com/questions/2049845/css-fixed-position-on-x-axis-but-not-y – Jordan Foreman Sep 05 '12 at 20:31
  • I'm afraid it's not possible. It would be nice to be able to set different values for `position-horizontal` and `position-vertical`, but this is not the case, there is only `position`. – GolezTrol Sep 05 '12 at 20:41

1 Answers1

4

I had a similar problem and I found some help and did some customizations for my own need. Check my code below:

CSS

#sidebar {
  top:70px; // make it for your own
  left: 0px; //make it for your own
  position: absolute;
}

jQuery

var leftOffset = parseInt($("#sidebar").css('left'));

$(window).scroll(function() {

  $("sidebar").css({

    'left': $(this).scrollLeft + leftOffset
  })
});
rafi
  • 1,493
  • 3
  • 31
  • 43