Fixed scrolling headers Translate from JavaScript to jQuery

Question

I found and configured an awesome jsFiddle demo that performs a brilliant glide / fixed header effect. Div blocks will push each other to the side and become the next fixed element at the top of the window.

However, I try my best to make this effect work in a regular document. Even if I copy / paste all the HTML, CSS and JS into another index.html file, this will not work. It is strange that it works fine in jsFiddle, but not elsewhere.

Ideally, is there a way to convert all this JavaScript to jQuery? I feel the solution is verbose and unnecessary to have all these lines of code. I would appreciate any help as this solution is excellent , except that I cannot get this to work in a regular document. I know it would be easier to work with jQuery, but I'm struggling to understand most of the JS code.

For reference: the original thread of the stack where I found this solution. It was updated a year ago and should work in most browsers.

Answer 1

Here is the 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:'' }); } } }); });