Help with 'sticky' header like instagram

naitsabes · 01-30-2013, 02:14 PM

i run a function which makes a header sticky. There are several posts under each other and each of them have a header.
What im trying to do is to make headers sticky (fixed) when they are 'top: 72px'. Before they become sticky they are absolute. When a new header is approaching the sticky header, eg. when the new header is 150px below the sticky header id like the sticky header to become absolute and when the new header is top 72 id like the new one to become the sticky.

It works with this code when all posts have the same height, but as soon as posts have different heights it doesnt work anymore.

JS

Code:

 function stickyTitles(stickies) {

    this.load = function() {

        stickies.each(function(){

            var thisSticky = jQuery(this).wrap('<div class="followWrap" />');

            jQuery.data(thisSticky[0], 'pos', thisSticky.offset().top);

        });
    }

    this.scroll = function() {

        stickies.each(function(i){


            var thisSticky = jQuery(this),
                nextSticky = stickies.eq(i+1),
                prevSticky = stickies.eq(i-1),
                pos = jQuery.data(thisSticky[0], 'pos');
 var diff = -23;
 var differ = 201;


            if (pos + diff <= jQuery(window).scrollTop()) {

                thisSticky.addClass("fixed");
                 if (nextSticky.length  > 0 && thisSticky.offset().top + differ  >= jQuery.data(nextSticky[0], 'pos') - thisSticky.outerHeight()) {

                    thisSticky.addClass("absolute").css("top", jQuery.data(nextSticky[0], 'pos') - thisSticky.outerHeight()-200);

                }

            } else {

                thisSticky.removeClass("fixed");

                if (prevSticky.length > 0 && jQuery(window).scrollTop() + differ<= jQuery.data(thisSticky[0], 'pos')  - prevSticky.outerHeight()) {

                    prevSticky.removeClass("absolute").removeAttr("style");

                }

            }
        });         
    }
}

jQuery(document).ready(function(){

    var newStickies = new stickyTitles(jQuery(".pagnering"));

    newStickies.load();

    jQuery(window).on("scroll", function() {

        newStickies.scroll();

    }); 
});

CSS

Code:

  .pagnering {
 margin-top: 72px;
        position: absolute;
    }
    .pagnering.fixed {
        position: fixed;
        width: 99.6%;
        z-index: 0;
        top: 0px;
    }
    .pagnering.fixed.absolute {
        position: absolute;
    }