菜单栏仅垂直固定

Question

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?

Answer 1

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