JQuery Waypoint Scroll Stop at Footer

Question

I am using JQuery Waypoint to scroll the left side navigation. How can I stop the scroll before the footer?

<script type="text/javascript">
var $jq = jQuery.noConflict();

$jq(document).ready(function() {

$jq('.top').addClass('hidden');
 $jq.waypoints.settings.scrollThrottle = 30;


$jq("#toc").waypoint(function(event, direction) {
    $jq('.top').toggleClass('hidden', direction === "up");

    if (direction === 'down') {
        var cssObj = {'position' : 'fixed', 'top' : '3px', 'left' : '100px'}
    }
    else {
        var cssObj = {'position' : 'absolute', 'top' : '3px', 'left' : '100px'}
    }
    $jq('#toc').css(cssObj);
},{
    offset: '3'
});



 });
 </script>

Answer 1

You can set another waypoint for the footer whose offset is equal to the height of the #toc element plus any padding, borders, and positioning additions.

So maybe something like:

var toc = $("#toc");
$("footer").waypoint(function(event,direction){
    toc.css({
        position: "absolute",
        bottom: "403px"
    });
},{
    offset: toc.height() + 6
});

This way, once it detects that the amount of room between the top of the footer and the top of the page is equal to the total height of the #toc element, it'll go back to position:absolute and a bottom value of 403px. Adjust this to match the height of the footer and accommodate for the spacing you desire between the footer and the #toc element.

Here's an example.