#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％。