jQuery - DIV 以滾動方式移動並將位置固定到窗口的頂部和底部

Question

可能已經有一個 jQuery 插件可以實現這一點，但我找不到一個完全符合我要求的插件。 如果有，請指點我的教程，謝謝。

我的問題是我有很長的頁面內容，當你滾動到頁面底部附近時，我的側邊欄不可見。

所以我想讓我的 #sidebar div 在你上下滾動頁面時粘在瀏覽器窗口的頂部和底部。

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

所以當你開始向下滾動時，側邊欄會像往常一樣滾動，但是當你到達側邊欄的末端時，它會粘住並且不會滾動，當你開始向上滾動時，側邊欄會跟隨直到側邊欄的頂部到達瀏覽器，然后它堅持。 反之亦然。

這可能嗎？

我創建了一個簡單的設計布局的jsfiddle ，這是中心。 我在側邊欄添加了一個虛線邊框，這樣你現在側邊欄應該粘在哪里。

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

任何建議，或者您知道在線教程或演示，都會非常棒！

---

更新

請參閱@Darek Rossman 的此嘗試

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

他已經有了基本的想法。 但是向上滾動，導致它捕捉到頂部。 我需要側邊欄隨着向上/向下滾動運動而流暢。 但堅持窗口的頂部或底部。 當頁眉/頁腳在視口中時，它也不應該被固定定位，因此它不會覆蓋。

謝謝

Answer 1

請看這里的小提琴： http ： //jsfiddle.net/dKDJz/2/

基本上，您只需觀察滾動事件，一旦窗口的滾動偏移量大於側邊欄的頂部，它就會向側邊欄添加一個固定的類，並在向上滾動時刪除。

這是根據CSS-Tricks發布的解決方案改編的

Answer 2

我已經用我的解決方案更新了 jsfiddle。

 var $sidebar = $("#sidebar"), $window = $(window), sidebartop = $("#sidebar").position().top; $window.scroll(function() { if ($window.height() > $sidebar.height()) { $sidebar.removeClass('fixedBtm'); if($sidebar.offset().top <= $window.scrollTop() && sidebartop <= $window.scrollTop()) { $sidebar.addClass('fixedTop'); } else { $sidebar.removeClass('fixedTop'); } } else { $sidebar.removeClass('fixedTop'); if ($window.height() + $window.scrollTop() > $sidebar.offset().top + $sidebar.height()+20) { $sidebar.addClass('fixedBtm'); } if ($sidebar.offset().top < 0) { $sidebar.removeClass('fixedBtm'); } } });

 h1, h2 { display: block; font-weight: bold; } #horizon { width: 100%; height: 100%; min-height: 100%; background: #cccccc; overflow: hidden; } #header, #footer { width: 480px; height: auto; overflow: hidden; background: teal; padding: 10px; color: #ffffff; } #wrapper { width: 500px; height: auto; overflow: hidden; background: #ffffff; margin: 0 auto; } #content-wrapper { width: 100%; height: auto; overflow: hidden: } #content { width: 330px; height: auto; overflow: hidden; background: #ffffff; margin: 0 auto; float: left; padding: 10px; } #sidebar { width: 130px; height: auto; overflow: hidden; background: #ffffff; margin: 0 auto; float: left; clear: right; padding: 8px; background: #e5e5e5; border: 2px dashed red; } .fixedBtm { margin-left: 350px !important; position: fixed; bottom: 0; } .fixedTop { margin-left: 350px !important; position: fixed; top: 0; } .post { margin: 5px; width: 320px; background: red; float: none; overflow: hidden; min-height: 175px } .buttons li { margin: 5px; width: 120px; background: blue; float: none; overflow: hidden; min-height: 20px; text-align: center; color: #ffffff; cursor: pointer; } .buttons li:hover { background: lightblue; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="horizon"> <div id="wrapper"> <div id="header">header</div> <div id="content-wrapper"> <div id="content"> <h1>Latest Posts</h1> <div class="post">This is a post</div> <div class="post">This is a post</div> <div class="post">This is a post</div> <div class="post">This is a post</div> <div class="post">This is a post</div> <div class="post">This is a post</div> <div class="post">This is a post</div> <div class="post">This is a post</div> <div class="post">This is a post</div> <div class="post">This is a post</div> </div> <div id="sidebar"> <h2>Sidebar</h2> <ul class="buttons"> <li>Button 1</li> <li>Button 2</li> <li>Button 3</li> <li>Button 4</li> <li>Button 5</li> <li>Button 6</li> <li>Button 7</li> <li>Button 8</li> <li>Button 9</li> <li>Button 10</li> <li>Button 11</li> <li>Button 12</li> <li>Button 13</li> <li>Button 14</li> <li>Button 15</li> <li>Button 16</li> <li>Button 17</li> <li>Button 18</li> </ul> </div> </div> <div id="footer">footer</div> </div> </div>

當窗口大於側邊欄時，側邊欄應保持在頂部，當側邊欄較大時，側邊欄應固定在底部。

Answer 3

為此，您不需要任何 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 4

這可能會有所幫助

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

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

Answer 5

我玩過Derek正在做的事情，我已經完成了你最初要求的頂部和底部。

我根據自己的需要編輯了一些css，我相信你可以把舊東西放在那里並復制腳本。

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

/ * NewEdit * /

我用你所擁有的東西取代了我所做的。 我想出了這個：
http://jsfiddle.net/stillb4llin/dKDJz/47/

/ * EndEdit * /

Answer 6

不幸的是我沒有足夠的代表來簡單地評論這個鏈接，所以在這里你去：

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

它已經有幾年了，但根據屏幕截圖顯示，它似乎完全覆蓋了您的需求。

Answer 7

試試這里http://jsfiddle.net/dKDJz/8/

我刪除了相當多的代碼。

我所做的是當你向下滾動它到達側邊欄的頂部時，它會粘在窗戶的頂部。 一旦你滾動回到頂部，無論標題有多高，它都會在符合標題時解開。