jQuery - DIV移動滾動動作和粘貼位置到窗口的頂部和底部

Question

可能已經有一個jQuery插件可以實現這一點，但我找不到一個完全是我以後做的。如果有，請將我指向教程，謝謝。

我的問題是我有很長的頁面內容，並且當您在頁面底部滾動時，側邊欄不可見。

因此，當您在頁面上下滾動時，我想讓我的#sidebar div粘貼到瀏覽器窗口的頂部和底部。

我的邊欄高度比您的典型屏幕分辨率要長，所以我需要邊欄的底部粘貼到瀏覽器窗口的底部以及瀏覽器的頂部。

因此，當您開始向下滾動時，側欄會像正常一樣滾動，但當您到達側欄的末尾時，它會粘住並且不會滾動，並且當您開始向上滾動時，側欄會一直跟隨側邊欄頂部到達瀏覽器，然後粘住。反之亦然。

這可能嗎？

我創建了一個簡單的設計佈局jsfiddle，它是中心的。我已經在邊欄中添加了一個虛線邊框，以便您現在可以在邊欄粘貼的位置。

http://jsfiddle.net/motocomdigital/7ey9g/5/

任何建議，或者你知道一個在線教程或演示，將最真棒！

---

UPDATE

請參見本文試圖通過@Darek羅斯曼

http://jsfiddle.net/dKDJz/4/

他有基本思想工作。但是滾動起來，導致它跳到頂部。我需要邊欄在滾動上/下運動時是流暢的。但堅持窗口的頂部或底部。當頁眉/頁腳處於視口中時，它也不應該被固定，因此它不會疊加。

感謝

Answer 1

這一個可以幫助

http://andrewhenderson.me/tutorial/jquery-sticky-sidebar/

http://designwoop.com/2011/09/tutorial-creating-a-sticky-sidebar-using-jquery/

Answer 2

不幸的是，我沒有足夠的代表簡單地用這個鏈接評論，所以這裏亞去：

http://www.derekallard.com/blog/post/conditionally-sticky-sidebar

這已經過了幾年了，但是基於屏幕截圖，它似乎完全覆蓋了你需要的東西。

Answer 3

在這裏看到的小提琴：http://jsfiddle.net/dKDJz/2/

基本上，你只是看的滾動事件，一旦窗口的滾動偏移量小於側邊欄的頂部時，它增加了一個固定的類側邊欄，及排除當它滾動回來時。

這是從張貼在CSS-技巧一solution適應

Answer 4

試試這個位置http://jsfiddle.net/dKDJz/8/

我已經刪除了不少的代碼。

我所做的是，當您向下滾動並且它到達側欄的頂部時，它會粘貼到窗口的頂部。一旦你回滾到頂部，無論標題變得多高，它都會在不符合標題的情況下解除壓縮。

Answer 5

我玩過Derek正在做的事情，並且我已經完成了最初和最後的要求。

我已經編輯了一些我的需求的CSS，我相信你可以保留你的舊東西在那裏，並複製腳本。

http://jsfiddle.net/mLdnb/3/

/* * NewEdit/

我已經取代了我做了與你有什麼。我想出了這個：
http://jsfiddle.net/stillb4llin/dKDJz/47/

/* * EndEdit中/

Answer 6

你不需要任何的jQuery或JavaScript這一點。所有這些都可以在CSS中使用position: fixed來實現。

變更側欄選擇以下

#sidebar { 
    width: 130px; 
    height: auto; 
    overflow: hidden; 
    background: #ffffff; 
    margin: 0 auto; 
    clear: right; 
    padding: 8px; 
    background: #e5e5e5; 
    border: 2px dashed red; 
    position: fixed; 
    right: 35px; 
} 

Answer 7

我已經更新了的jsfiddle http://jsfiddle.net/7ey9g/76/我的解決方案。

當側窗欄大於側欄時，側欄應保留在頂部，並在側欄較大時將側欄固定到底部。