Freeze element (position:fixed) for specific scroll range

Question

I'm working on this site ( http://styleguide.co/medhelp/ ) that has 5 sections. For one of the sections (Styles), I've got a sidenav I'm trying to get to stick in the visible frame only as long as users are scrolling in that section.

Here's what I've done thus far - I'm telling the section title & sidenav to stick after the top of the section has begun:

$(window).scroll(function(event) {

    var sw = $('.fixed'),
    pg = $('.styles'),
    diff = pg[0].offsetTop - window.pageYOffset;

    if (diff < 80 ) {
        $('.fixed').css('position', 'fixed');
        $('.fixed').css('top', '160px');
        $('.styles').css('position', 'fixed');
        $('.styles').css('top', '70px');

    }
    else {
        $('.fixed').css('position', 'relative');
        $('.fixed').css('top', '0px');
        $('.styles').css('position', 'relative');
        $('.styles').css('top', '0px');
    }
});

I can't seem to figure out a good way to make the section title "Style" and the sidenav appear/disappear while I scroll to/from that section. Any advice? What could I do better? A simple solution demo in jsfiddle would really help!

Please click on this link & scroll down/up to know what I'm referring to: http://styleguide.co/medhelp/

Answer 1

I'm not going to give you a fiddle, but you need to determine when the next section would stick based on its offset from the top. At the moment what you are doing is:

// if difference top and element < 80 -> fix to top, else position is relative

First of all this means the condition will never be undone. What you need to do in order to continue is:

// once next contact section comes into screen 
//(offset from the top of the screen <= screen height), give 
var winHeight = $(window).height();
var calcTop = 80 - (winHeight - (winHeight - $('#nextSelector').offset().top);
$('.fixed').css('top', calcTop);

This will give the illusion of your text scrolling up as the new section comes up. I hope this helps. Also, when scrolling back up it doesn't re-stick, but you probably are aware of that.