html - 菜单栏仅垂直保持固定

Question

我想创建一个菜单栏，当您向上和向下滚动屏幕时，该菜单栏保持垂直，但如果用户左右滚动，我希望菜单栏与其余内容一起左右移动。

例如，如果用户在主页上并决定向下滚动以阅读公告。我希望左侧菜单栏保持原位。但是假设用户放大了我们的网页，因此整个页面不适合屏幕。如果用户决定一直滚动到页面的右侧，我希望菜单栏与页面最左侧的其他内容一起消失。

有没有办法只用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
  })
});