Fixed Scrolling Headers Translate from JavaScript into jQuery

Question

I found & customized an awesome jsFiddle demo which performs a brilliant sliding/fixed header effect. The div boxes will push each other out of the way and become the next fixed element at the top of the window.

However I'm struggling to ever get this effect working in a normal document. Even if I copy/paste all the HTML, CSS, and JS into another index.html file it will not work. Strange that it is working perfectly in jsFiddle but not anywhere else.

Ideally is there any way to convert all this JavaScript into jQuery? I feel like the solution is verbose and unnecessary to have all those lines of code. I would appreciate any help since this solution is perfect except for the fact that I cannot get this working in a regular document. I know jQuery would be easier to work with, but I'm struggling to understand much of the JS code myself.

For reference here is the original stack thread where I found this solution. It was updated one year ago and should still be working in most browsers.

Answer 1

Heres a jQuery solution

$(function(){
  $(window).scroll(function(){
    var fixedHeads = $('.fixedheader');
    for(var i = 0, c = fixedHeads.length; i < c; i++){

      var header = $(fixedHeads[i]);
      var next = fixedHeads[i+1] ? $(fixedHeads[i+1]) : undefined;
      var prev = $(header.prev());

      if(window.pageYOffset > prev.offset().top){
        var top = 0;
        if(next){
          top = header.height() - (next.offset().top - window.pageYOffset);
          top = top < 0 ? 0 : -top;
        }
        if(top === 0){
          //if there is another header, but we have room
          prev.css('height', header.height() + 'px');
        }
        header.css({
          position: 'fixed',
          top: top + 'px'
        });
      } else{
        prev.css('height', '0px');
        //if we haven't gotten to the header yet
        header.css({
          position:'static',
          top:''
        });
      }
    }
  });
});