在侧边栏中向下滚动的侧边栏菜单

Question

我在其他站点上多次看到此消息，但无法轻松找到该方法。

我在左侧边栏中有一个带有子菜单的网站，现在当我向下滚动时，我希望菜单小部件在窗口顶部的侧边栏区域内停留，因此菜单随即出现。

到达侧边栏区域的末端后，它应离开末端并等待向上滚动或刷新该站点。向上滚动时，它应停在侧边栏区域的顶部边框。

For better understanding: https://jsfiddle.net/6hrsod07/ 我希望红色菜单在浅红色区域内向下滚动。

非常感谢您！

Answer 1

这是它的小提琴：https://jsfiddle.net/2d4xhcqe/

这样，当您向下滚动时，它将停留在顶部。

nav {
  background: #f00;
  position: sticky;
  top: 0;
}

Answer 2

为您的nav元素提供position: sticky;属性。这使nav元素根据top，bottom，left和right的值随滚动位置移动，并跟随视口直到到达其父的边框。

nav {
  position: sticky;
  top: 0;
  background: #f00;
}