如何讓固定div（粘性側欄）在頁腳到達時向上滾動

請幫助JS專家！我花了整天的時間在StackOverflow上嘗試所有類似問題的各種解決方案 - 它們都不是我想要的。如何讓固定div（粘性側欄）在頁腳到達時向上滾動

我有一個動態高度邊欄，當用戶向下滾動到邊欄底部（頁面內容通常比邊欄更長）時，邊欄會變得固定。這樣，當用戶不斷閱讀內容時，側欄的下半部分保持可見。

問題是現在側欄運行到頁面底部的頁腳中。由於側欄比查看端口長，因此不能簡單地變爲相對位置：再次相對。它需要向上滾動頁腳（還有一個動態高度，以增加複雜度）。

我做的圖像（它不會讓我張貼在這裏，因爲我如果我知道如何增加我的名聲被定罪。）http://imgur.com/Wzb0LRu

我想發生的是找到一個語法正確的說法：

When scrollTop >= Height of Footer + 20px margin { 
    add CSS "bottom: <Height of Footer + 20px margin>" to SIDEBAR };

在此先感謝所有嘗試幫助的人！

來源

2015-05-27 Pete

當然有人必須知道如何做到這一點？我不敢相信我已經提出過一個讓所有人都難過的問題！ – Pete

有兩種基本方法可以做到這一點：

正確方法：修復，這樣滾動條的父被包含在事物的HTML，從報頭的底部跨越到的頂部頁腳。這樣，一切都完成了。

代碼：

<div id="header"> 
</div> 
<div id="main"> 
    <!-- possibly overflown stuff, maybe your fake scrollbar if you have one --> 
</div> 
<div id="footer"> 
</div>

如果你能完成這項工作，這將是最好的方式通過爲止。

欠正確方法：我認爲這唯一可能有由div或類似的可變大小滾動條。使用類似：

代碼：

element-that-scrolls.addEventListener("scroll",function(e){ 
    // this condition may need some fiddling -- feel free to edit 
    if (element-that-scrolls.scrollTop > scrollable-height + pixel-height-of-footer - height-of-scrollbar - required-margin-btw-footer-and-scrollbar){ 
     /* adjust height of scrollbar until previous condition is == */ 
    } 
},false);

不幸的是我是我的手機上，並不能測試這些，但我評論，隨意編輯。

有趣的事實我剛剛得知：由於降價錯誤，「code：」是必要的。 See more。

來源

2015-05-27 02:20:43

如何讓固定div（粘性側欄）在頁腳到達時向上滾動

回答

相關問題