search

WickyNilliams / headroom.js

Give your pages some headroom. Hide your header until you need it
https://wicky.nillia.ms/headroom.js/
MIT License
10.86k stars 824 forks source link

Nothing happen on Chrome #375

Closed kopax closed 3 years ago

kopax commented 3 years ago

Hello, I am trying to use headroom.js on this template:

https://open.cruip.com/

The classes are changing on my header while I scroll, but the css does not display anything and it stays up, this is my css:

header.site-header {
  .headroom {
    will-change: transform;
    transition: transform 200ms linear;
  }
  .headroom--pinned {
    transform: translateY(0%);
  }
  .headroom--unpinned {
    transform: translateY(-100%);
  }
}

Is this still maintained?

kopax commented 3 years ago

Solved by removing some positionned css on the header.

WickyNilliams commented 3 years ago

Glad you solved it!

kopax commented 3 years ago

Yes it wasn't too hard, I opened this to quickly. I have a transparent background and some image bellow and I had to reduce the sensitivity so it disappears quickly, but now on mobile when you swipe down, the header slide down and fast quickly, it's bad UX, do you have a clue on how to improve this? Adding some offset before the trigger is not an option, reducing the animation duration is also a bad option as you will have the background images displayed under the transparent background.

WickyNilliams commented 3 years ago

you can change the tolerance per direction, so you could perhaps increase more for scrolling upwards? eg:

tolerance: {
  up: 5,
  down: 0,
},
kopax commented 3 years ago

Hi and thanks @WickyNilliams, I'll have a try tomorrow :love_you_gesture: