Fix div bottom on scroll

Question

I have the following JS which sticks the menu on the right to the top when you scroll down. I've created this Plunker with this markup (you may need to scroll to widen the preview window to see the columns side by side).

 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> 

What I would like to additionally happen is when the menu is stuck, I would like for the content of the active tab in that menu to be scrollable with the bottom of the visible window marking the bottom of the scrollable area. It should look like this:

As you continue scrolling down on the page, I would like the bottom of the scrollable area in the tab to end up matching the bottom of the parent. It should look like this:

I'm unsure about how to get the tab content to be scrollable as well as setup the javascript to fix the bottom of the menu appropriately.

Answer 1

Calculat scrollBottom value like this :

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

And compare it with the value you want to leave at the bottom, in my cas is .outerHeight() of my footer :

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

First, you can remove the javascript and use css

position: sticky

that is well supported along all browser. And polyfills are avaliables.

Check out this demo:

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

May be you have to decrease the size of the window to see full effect in action (sidebar sticks on top, reached the and of the page, scroll itself).