菜单栏仅垂直保持固定答案

【问题标题】：Menu bar stays fixed only vertically菜单栏仅垂直保持固定
【发布时间】：2021-04-17 18:30:49
【问题描述】：

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

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

有没有办法只用 css 做到这一点？

【问题讨论】：

我会看看能不能搞出点什么来，但我不确定 just CSS 是否可行...不过，如果你不反对的话使用 lil javascript...我想你可以看看 stackoverflow.com/questions/2049845/…
恐怕不可能。能够为position-horizontal 和position-vertical 设置不同的值会很好，但事实并非如此，只有position。

标签： html css css-position

【解决方案1】：

我遇到了类似的问题，我找到了一些帮助并根据自己的需要进行了一些自定义。检查下面的代码：

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

【讨论】：