将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/

可能是您必须减小窗口的大小才能看到完整的效果（侧边栏停留在顶部，到达页面的和，然后滚动自身）。