將div底部固定在滾動條上

Question

我有以下JS，當您向下滾動時，它會將菜單顯示在右側的頂部。 我已經使用此標記創建了此 Plunker（您可能需要滾動以擴大預覽窗口才能並排查看列）。

 window.addEventListener("scroll", handleScroll); function handleScroll() { const $panel = $(".menu")[0]; if ($(this).scrollTop() > 90) { $panel.classList.add("sticky"); } else { $panel.classList.remove("sticky"); } } 

 .navbar { background-color: #fff; border-bottom: 1px solid; font-size: 48px; line-height: 48px; position: fixed; } .contents { margin-top: 55px; } .menu.sticky { bottom: 60px; right: 0; position: fixed; top: 55px; width: 31.491712707182323%; } .menu.sticky .tab-content { overflow: auto; } .menu .tab-content { padding: 20px; } .menu button { margin-top: 20px; } .btn.pull-right { margin: 20px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="navbar navbar-fixed-top">NAVBAR</div> <div class="contents"> <div class="row-fluid"> <div class="span12"> <h3>Here is some additional stuff</h3> <h5>And even more</h5> </div> </div> <div class="row-fluid"> <div id="wrapper"> <div class="span8" style="border: 1px solid blue;"> <p>Some content</p> <p>Some content</p> <p>Some content</p> <p>Some content</p> <p>Some content</p> <p>Some content</p> <p>Some content</p> <p>Some content</p> <p>Some content</p> <p>Some content</p> <p>Some content</p> <p>Some content</p> <p>Some content</p> <p>Some content</p> <p>Some content</p> <p>Some content</p> <p>Some content</p> <p>Some content</p> <p>Some content</p> <p>Some content</p> <p>Some content</p> <p>Some content</p> <p>Some content</p> <p>Some content</p> <p>Some content</p> <p>Some content</p> <p>Some content</p> <p>Some content</p> <p>Some content</p> <p>Some content</p> <p>Some content</p> <p>Some content</p> <p>Some content</p> <p>Some content</p> <p>Some content</p> <p>Some content</p> <p>Some content</p> <p>Some content</p> <p>Some content</p> <p>Some content</p> <p>Some content</p> <p>Some content</p> <p>Some content</p> <p>Some content</p> <p>Some content</p> <p>Some content</p> <p>Some content</p> <p>Some content</p> <p>Some content</p> </div> <div class="span4" style="border: 1px solid red;"> <div class="menu" style="border: 1px solid green;"> <ul class="nav nav-tabs"> <li><a href="#first" data-toggle="tab">First</a></li> <li><a href="#second" data-toggle="tab">Second</a></li> </ul> <div class="tab-content"> <div id="first" class="tab-pane active"> <ul> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> </ul> </div> <div id="second" class="tab-pane">Second tab contents</div> </div> </div> </div> </div> </div> <div class="row-fluid"> <div class="span12"> <button class="btn pull-right">Button I don't want hidden</button> </div> </div> </div> 

我還要發生的事情是，當菜單卡住時，我希望該菜單中活動選項卡的內容可滾動，而可見窗口的底部標記可滾動區域的底部。 它看起來應該像這樣：

當您繼續向下滾動頁面時，我希望選項卡中可滾動區域的底部最終與父級底部匹配。 它看起來應該像這樣：

我不確定如何使標簽內容可滾動以及如何設置JavaScript以適當地修復菜單底部。

Answer 1

計算scrollBottom值：

$( document ).height() - ( $( window ).scrollTop() + $( window ).height() )

並將其與您想在底部保留的值進行比較，在我的cas中是footer .outerHeight() ：

 //get height + marfin + padding of footer h = $("footer").outerHeight(true) $(window).scroll(function() { //get scrollButtom var scrollButtom = $( document ).height()-($(window).scrollTop() + $(window).height()); if (scrollButtom >= h) { $(".box").css('bottom','0'); } //scroll top/down with a footer if (scrollButtom < h) { $(".box").css('bottom',(h-scrollButtom)+'px'); } //show & hide sidebar if($(window).scrollTop()>200){ $(".box").css('opacity','1'); } if ($(window).scrollTop() <= 200) { $(".box").css('opacity','0'); } }); 

 body{ margin:0; padding:0; } .box{ background:#f00; height:100px; width:100px; position:fixed; bottom:0; right:0; opacity:0; } .foo{ height:600px; border:1px solid #000; } footer{ background:#333; color:#ccc; height:150px; padding:20px; margin:10px; } 

 <script src="https://code.jquery.com/jquery-3.2.1.min.js"> </script> <div class="box"> </div> <div id="all"> <div class="foo">Text</div> <div class="foo">Text</div> <div class="foo">Text</div> <div class="foo">Text</div> <div class="foo">Text</div> </div> <footer> I am a footer </footer> 

Answer 2

首先，您可以刪除JavaScript並使用CSS

position: sticky

在所有瀏覽器中都得到很好的支持。 和polyfills可用。

查看此演示：

https://philipwalton.github.io/polyfill/demos/position-sticky/

可能是您必須減小窗口的大小才能看到完整的效果（側邊欄停留在頂部，到達頁面的和，然后滾動自身）。