0

I really like the headroom.js but I just can not get it working. Some kind of step-by-step instruction would be great. So here is what I did so far...

  1. I downloaded the git repro

  2. Included the scripts to my html file right before my closing body tag

<script type="text/javascript" src="js/headroom/Headroom.js"></script> <script type="text/javascript" src="js/headroom/jQuery.headroom.js"></script>

  1. Added following css to my css files

    .headroom { position: fixed; top: 0; left: 0; right: 0; transition: all .2s ease-in-out; } .headroom--unpinned {top: -100px;} .headroom--pinned {top: 0;}

  2. Added the headroom script at the very and even after the scripts links in point number 2

    <script> (function() { var header = new Headroom(document.querySelector("#header"), { tolerance: 5, offset : 205, classes: { initial: "animated", pinned: "slideDown", unpinned: "slideUp" } }); header.init(); }()); </script>

  3. Added the necessary ids and classes to my header HTML element <header id="header" class="header header--fixed hide-from-print" role="banner"><my navigation stuff goes in there></header>

But I do not get it working somehow. I do not see any classes applied when scrolling nor anything else. Does anyone know the wrong part?

I would be so greatful,..

thanks in advance

boehmatron
  • 713
  • 5
  • 15
  • is there nobody to give me a helping hand? I dont get it working with this [post](http://stackoverflow.com/questions/20648451/how-do-you-use-headroom-js-with-bootstrap-3-navbar) – boehmatron May 25 '16 at 13:28

2 Answers2

2

I had a very similar setup to what you have above in an older site using version 0.7.0 of Headroom.js and jQuery.headroom.js. These were the files in the /dist directory of that version. Headroom.js was working as expected. I then tried the latest version 0.9.3 using the files from the /src directory (as the /dist is no longer included since v0.8.0) and it did not add any classes to the selected element, and there were no errors thrown (everything loaded correctly, but no joy). Now, I'm a self reported novice, thus I'm certain there is a good explanation as to why this was a breaking change for my setup.

DrLulz
  • 146
  • 1
  • 9
1

Don't download it from Github, because you will need to build it first before using.

  1. Go to the developer website http://wicky.nillia.ms/headroom.js/
  2. Click on "Production" red button to download.
  3. Then follow rest of the documentation.
Russell
  • 45
  • 9