4

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.

Community
  • 1
  • 1
Jake
  • 1,285
  • 11
  • 40
  • 119
  • 2
    is your code inside $(document).ready?. I am asking this as this is the only difference I can see when you move your code from jsfiddle. – Anoop Sep 25 '12 at 16:49
  • @Shusl no I didn't include that, but currently the JS code doesn't use any jQuery selectors or functions. The entire script is written with plain JavaScript. I think that's why it isn't translating well when copied into a new document. – Jake Sep 25 '12 at 16:51
  • It's using jQuery to do an onload function for all of the Javascript. Javascript or jQuery should both translate the same. After all, jQuery is just Javascript. – jholloman Sep 25 '12 at 16:52
  • 1
    I copy/paste same code to create a html page and it working for me. Only change I made was I removed '?' mark which got appended when I copied the code. – Anoop Sep 25 '12 at 16:57
  • @Shusl can you send me a copy of the HTML file you got working? my e-mail is jakerocheleau[AT]gmail.com. I'm curious because I've tried copying the code two different times and it hasn't worked for me at all – Jake Sep 25 '12 at 17:04
  • @jholloman the onload function is from regular JavaScript and we could turn that off, wouldn't affect the script at all. I dont think it's the onload call that is causing issues. but either way it would be nice to see the JS cleaned up a bit? I just don't follow how it can work in jsFiddle but not within an external document – Jake Sep 25 '12 at 17:04
  • @Shusl yep so it can be working in an external document but the JS code must be inline. If you try to include a .js src file the script stops working. I am still looking into options but I hope this post can receive some attention! I would love to convert this clunky block of JS into more smooth jQuery selectors since I think there will be less errors – Jake Sep 25 '12 at 17:22

1 Answers1

3

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:''
        });
      }
    }
  });
});
DeadAlready
  • 2,988
  • 19
  • 18
  • you sir are brilliant. This code is a lot cleaner and it does appear to still work perfectly. I [forked a copy](http://jsfiddle.net/_jro/zJuH5/) with your code which still seems to run perfectly. Thanks so much! – Jake Sep 25 '12 at 19:04