#sidebar位置：固定于某些滚动

Question

请查看以下内容： http : //i.stack.imgur.com/gDFpq.png

我的目标是使边栏保持在图中的状态，但是一旦到达窗口顶部（当用户向下滚动时），它就会更改为position:fixed并更改margin-top:0 。 我在网上看了一个教程，并了解了这一position:absolute可能有用，但老实说我不知道​​如何做到这一点，因此任何帮助都是有用的。 如果您因为我不了解我的意思而需要更多细节，请询问:)

任何帮助，将不胜感激。

Answer 1

要检测何时到达窗口顶部，可以使用window.scroll事件。

这是一个很好的教程，可以教您确切要做什么： http : //css-tricks.com/scrollfollow-sidebar/

Answer 2

您的侧边栏将具有可变的高度，直到徽标滚动到视线之外。 代替使用position:absolute ，将其保持在position:fixed ，检查徽标的剩余高度并将其从侧边栏的高度中提取出来。

这是一个小提琴： http : //jsfiddle.net/2afv13z3/

将侧栏保持在bottom:0; 以及基于窗口滚动位置的top属性，您将始终在徽标下将其设置为100％。