CODE: Jquery Follow-On-Scroll Fixed Sticky Sidebar with Cutoff

Purpose

Capabilities

Limitations

Instructions

// Sticky Sidebar - CSS Tricks - Optimized by Doug Neiner and Julian Ware $(function() { $sticky = $('#sticky'), // Scrolling element $footer = $('footer'), // Footer container $sidebar = $('aside'), // Sidebar Container scrollPoint = 100, // Distance to scroll before sticking topPadding = 100, // Fixed minimum distance from top of window bottomPadding = 40, // Adjustment to scrolling element point of deactivation at footer $window = $(window), documentHeight = $(document).height(), sidebarHeight = $sidebar.outerHeight(), footerHeight = $footer.outerHeight(), offset = $sticky.offset(); $window.scroll(function() { if (($window.scrollTop() > offset.top - scrollPoint) && ($window.scrollTop() < (documentHeight - footerHeight) - sidebarHeight + bottomPadding)) { $sticky.stop().animate({marginTop: $window.scrollTop() - offset.top + topPadding},0); // Last number is drag animation duration } else { $sticky.stop().animate({marginTop: 0},0); // Input same drag animation duration as above } }); }); // End Sticky Sidebar