jquery - Stop floating sidebar once it reaches the footer. jQuery Waypoints

Question

I'm using this jQuery waypoints plugin, to float my sidebar. Everything is working as it should, but i need to set an additional waypoint on the footer so that the sidebar doesn't scroll above it and unfortunately i do not know how to code jQuery.

I setup a quick jsfiddle, but please bear with me as this was my first time using jsfiddle.

Any help will be greatly appreciated as i am stuck on how to accomplish this.

Here's the current jQuery code I am using:

<script>
    $(document).ready(function() {
        $('.sidebar').waypoint('sticky', {
             offset: 264 // Apply "stuck" class when element 264px from top
        });;
    });
</script>

Answer 1

您不需要为此使用插件，您可以轻松地自己完成此操作。只需调整变量。

更新：这里正在使用 jsFiddle。

$(window).scroll(function() {
   var scrollVal = $(this).scrollTop();
    if ( scrollVal >= 0 && scrollVal < 260 ) {
       //between 0 and navigation

        $('.sidebar').removeClass('stuck').css({'margin-top':'0px'});;
        $('.content').css({'margin-left':'0px'});
    }else if ( scrollVal > 260 && scrollVal < 800 ) {
       //between navigation and footer

        $('.sidebar').addClass('stuck').css({'margin-top':'0px'});;
        $('.content').css({'margin-left':'100px'});
    }else if ( scrollVal > 800 ) {
        //beyond footer

        $('.sidebar').removeClass('stuck').css({'margin-top':'540px'});
        $('.content').css({'margin-left':'0px'});
    }
});