1

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>
Barlas Apaydin
  • 7,233
  • 11
  • 55
  • 86
Steven Jones
  • 35
  • 1
  • 2
  • 9
  • You can see a live working example here, http://staging.alcoholrehab-florida.com/alcohol-rehab-programs-test.html – Steven Jones Jan 31 '13 at 17:21
  • If you want do this without an external plugin: http://stackoverflow.com/a/11971912/1428241 – Barlas Apaydin Jan 31 '13 at 17:25
  • Thanks for the response, but this doesn't help me with the problem of the sidebar overlapping the footer upon scrolling. I'm assuming i need to setup an additional waypoint for the footer to trigger the sidebar class to be changed back to relative instead of fixed. I just don't know how to code / incorporate this. – Steven Jones Jan 31 '13 at 18:26

1 Answers1

2

You don't need to use plugin for this, you can easily do this your own. Just adjust the variables.

Updated: Here is working 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'});
    }
});
Barlas Apaydin
  • 7,233
  • 11
  • 55
  • 86
  • I understand that, but what i'm trying to achieve is to stop the sidebar from being fixed when the footer is reached. If you take a look at it now, the sidebar will overlap the footer once the user has scrolled down far enough. – Steven Jones Jan 31 '13 at 20:40
  • Awesome. Now may i ask you why you chose a scrollVal of 800? I believe this will not work if the content div does not have a fixed height, which it doesn't, correct? Wouldn't it be best to calculate the window height and subtract the footer height? I'm not familiar with jQuery so i'm not sure if this logic is right or not. – Steven Jones Jan 31 '13 at 22:36
  • @StevenJones 800 = headerHeight + contentHeight but ofcourse it's better to choose section's heights for the limits, [i've given the example at the very begining](http://stackoverflow.com/questions/11971475/setting-css-value-limits-of-the-window-scrolling-animation/11971912#11971912), just inspect. – Barlas Apaydin Feb 01 '13 at 13:08