Not working at all

[ghost]

Some weird thing happen in this case, It seems there is not syntax errors, but some way the script doesn´t work "at all" http://codepen.io/sp3ncer/pen/twnFI

[WickyNilliams]

You need to add some CSS classes for the various "events" (pin, unpin etc). headroom does not provide any styles itself, it just adds or removes the classes you supply at the appropriate time. The user is left to provide the styles for those classes.

CSS for the examples used on the site can be found here if you'd like to use them: https://github.com/WickyNilliams/headroom.js/tree/gh-pages/assets/styles/examples

[WickyNilliams]

Actually i just noticed you were including styles from animate.css... it does work if i scroll really fast, but not otherwise. try reducing the offset and tolerance values that should make it more responsive. You might also like to try the styles i linked above, i modified them slightly from animate.css so they may fare better

[frankie-loves-jesus]

This was unclear to me as well (hence those issues I just created). Exactly where can one find example headroom--* CSS? Would it be possible to add some basic examples to README.md?

Thanks :)

[WickyNilliams]

I admit the docs aren't entirely clear on the point, I will get around to updating them at some point.

I provided a link above to the example styles used in the playground. Check those out if you just want something off the shelf.

[WickyNilliams]

Anyway I'm going to close this issue as I don't think it's a bug. @sp3ncer if you think otherwise, please comment here!

[ghost]

yep! It's just a documentation issue!

[calebjclark]

This is really confusing. Nothing in the documentation made it clear that CSS styles needed to be included. I spent the last 30 minutes trying to figure out what was wrong with my angular implementation.

[ghost]

@calebclark In this thread is the solution: #62

[WickyNilliams]

Whilst it's not perfectly clear, it's definitely mentioned:

At it's most basic headroom.js simply adds and removes CSS classes from an element in response to a scroll event... Relying on CSS classes affords headroom.js incredible flexibility. The choice of what to do when scrolling up or down is now entirely yours

I'm really hoping that something is lost in the text, and you're not meaning to come across so abrasive, but it feels that way. If you're complaining about losing 30 minutes of time instead of spending much longer developing something comparable yourself, you should seriously reconsider your position. If you're not, then ignore everything I just said.

Pull requests are always welcome, by the way, if you'd like to help improve the docs.

[calebjclark]

@WickyNilliams, my apologies on coming across abrasive, which was not the intent of my words. My only purpose in sharing my confusion was to help out. I know that sometimes it's tough for an author to understand the knowledge-gap of someone who is new, since it's all very clear to them.

I think headroom.js is an awesome plugin, and I'm very excited to use it. The rest of your documentation is beautifully written and very easy to follow.

By the way, I did read the quote you listed, I just understand it to say that I could use css classes to override default functionality.

Thanks again.

[WickyNilliams]

No problems, sorry for confusing your tone.

This is top of my list of things to remedy, for the user's benefit and also so I don't lose my sanity constantly explaining it here :)

[CathyMacars]

I'm gonna quote @calebclark, to get to an interesting issue: "I just understand it to say that I could use css classes to override default functionality". Maybe it would be interesting for this widget to work out of the box? Of course, that would require the addition of a stylesheet in the project. This would be nice and make the widget more useable in quick projects where people are using Bootstrap and stuff like that to get a (generally temporary) site/app running as quick as possible. Just a thought.

[tabish89]

@WickyNilliams I am having trouble implementing this really cool plug-in in an angular setting/environment. I have done the following so far and cannot for the life of me figure out what is wrong with my implementation:

1. Added headroom.js
2. Added angular.headroom.js
3. Added reference to index.html

  <script src="/js/libraries/angular.headroom.js"></script>
  <script src="/js/libraries/headroom.js"></script>

4. Added requirement to angularJS module

angular.module('PSApp', [
  'fcsa-number',
  'headroom',
  'typer',...
])

5. Added some basic CSS

.headroom {
    will-change: transform;
    transition: transform 200ms linear;
}

.headroom--pinned {
    transform: translateY(0%);
}

.headroom--unpinned {
    transform: translateY(-100%);
}

What am I doing wrong? It just doesn't want to work... activate. I scroll up/down and nothing happens...