How can I create a sticky floating fixed / scrollable sidebar?

Question

I have a site with a bar on the left, which should remain with the user. Therefore, when the user scrolls, the sidebar scrolls until it says 5px from the top of the page. From now on, it should be locked in place.

Of course, it is possible that the view port is smaller than the left column, so the left panel does not fully fit into the screen. Not quite dramatic. However, I would like the user to scroll the bottom, and the bottom of the sidebar to “hit” the page footer, and then scroll again with the page.

Here is the code I have: basic setup of my site and an attempt to the first part of my question (but you will see that it does not work): jsfiddle .

I think the first part of the question is pretty clear, but the second part may be a little hard to understand, so here is the layout: You can see that the text is missing because the text is above the viewport.

Here's the js for my attempt for the first part:

$(document).ready(function () { var theLoc = 5; var links = $('#left'); $(window).scroll(function () { console.log('scroll'); if (theLoc >= $(window).scrollTop()) { if (links.hasClass('fixed')) { links.removeClass('fixed'); } } else { if (!links.hasClass('fixed')) { links.addClass('fixed'); } } }); }); 

But maybe a bigger css problem:

 .fixed { position:fixed; } 

I tried again to indicate the height, etc. (because it appears to be very large), but without promotion.

Answer 1

I did this a while ago, here is the code I created for this: View JSFiddle .

(You may have to change your layout a bit, I'm not sure how well this will work with the table'd layout you have, I would suggest using divs and putting them in your content layout.), Alternatively, you can use code / logic below and roll your own with your own layout.

Basically,
- Get our items
- Get sidebar position on download page
- Get #content.outerHeight()

Once we have these vars, in the window scroll test, to find out if we were <= (less than or equal to) our original sidebarTop position or to check if we blogHeight , if any of 2 is true, remove the sticky class. elseif our scroll >= our starting position is sidebar , then add the .sticky class (which has position: fixed ).

Check out JSFiddle (click here)

---

Javascript looks like this:

 // Cache our vars for the fixed sidebar on scroll var $sidebar = $('#sidebar-nav'); // Get & Store the original top of our #sidebar-nav so we can test against it var sidebarTop = $sidebar.position().top; // Edit the `- 10` to control when it should disappear when the footer is hit. var blogHeight = $('#content').outerHeight() - 10; // Add the function below to the scroll event $(window).scroll(fixSidebarOnScroll); // On window scroll, this fn is called (binded above) function fixSidebarOnScroll(){ // Cache our scroll top position (our current scroll position) var windowScrollTop = $(window).scrollTop(); // Add or remove our sticky class on these conditions if (windowScrollTop >= blogHeight || windowScrollTop <= sidebarTop){ // Remove when the scroll is greater than our #content.OuterHeight() // or when our sticky scroll is above the original position of the sidebar $sidebar.removeClass('sticky'); } // Scroll is past the original position of sidebar else if (windowScrollTop >= sidebarTop){ // Otherwise add the sticky if $sidebar doesnt have it already! if (!$sidebar.hasClass('sticky')){ $sidebar.addClass('sticky'); } } } 

HTML :

 <header>This is the header!</header> <ul id="sidebar-nav" class="nav nav-list"> <li><a href="#">Home</a></li> <li><a href="#">Blog</a></li> </ul> <div id="content">Content in here, scroll down to see the sticky in action!</div> <div class="clear"></div> <div id="footer">This is the #footer</div> 

CSS :

 /* Sticky our navbar on window scroll */ #sidebar-nav.sticky {position:fixed;top:5px;} /* Other styling for the html markup */ header { border:1px solid #aaa; background-color:yellow; margin-bottom:5px; height:50px; } #sidebar-nav { width:150px; border:1px solid #ddd; margin:0; padding:0; float:left; } #sidebar-nav li { list-style:none; border:1px solid #ddd; margin:10px; padding:2px; } #content { height:2000px; width:500px; padding:10px; border:1px solid #ddd; margin:0 0 10px 5px; float:right; } #footer { height:800px; border:1px solid green; background-color:#ddd; } .clear { clear:both; } 

:)