使用position：fixed;制作滚动菜单;

Question

我正在制作一个网站（http://www.deayoga.ch/），我想让左边的菜单栏滚动到页面。换句话说，它将按原样在页面上开始，然后，当用户向下滚动时，它将相对于浏览器窗口保持固定。这个想法来自一些StackOverflow页面右侧的链接，如here 我怎么能做到这一点？


PS：我已经知道如何使用position: fixed; left: 0;将div固定在左侧，但我的问题是如何在页面中间执行此操作，而不知道窗口侧面的距离（因为页面位于中间，无论窗口大小如何）

Answer 1

Remy Sharp有一个关于如何做到这一点的非常好的教程（有视频）：

http://jqueryfordesigners.com/fixed-floating-elements/

Answer 2

听起来像是一个数学问题...使用JS获取窗口大小，除以2得到中间点，从中点值减去固定div大小的一半，然后设置CSS位置“留下“价值观。

Answer 3

将此添加到您的样式表，而不是现在#leftcol

的类

#leftcol {
    position: fixed;
    top: 50%;
    margin-left: 20px;
    margin-top: -150px;
    text-align: center;
}

然后将以下内容添加到#container课程中：

position: relative;

您的菜单现在位于页面中间。您可能需要重新定位内容，但只需添加边距。