Hide Website Header On Scroll -- Headroom.JS Tutorial (Wordpress / Oxygen Builder)
HTML-код
- Опубликовано: 15 сен 2024
- Headroom.js is a lightweight, high-performance JS widget (with no dependencies!) that allows you to react to the user's scroll. The header on this site is a living example, it slides out of view when scrolling down and slides back in when scrolling up.
This video shows you how to integrate Headroom.js on your site, leading to a better user experience.
Filmed with Oxygen Builder, but applicable to any website, on any CMS!
Companion article: isotropic.co/s...
We're using Advanced Scripts for our code management:
Check it out: isotropic.co/o...
Read our review: isotropic.co/a...
Check out AppSumo! appsumo.8odi.n...
Read the blog at isotropic.co/blog
This is still very helpful. I was able to follow this tutorial and got it running on my Bricks Builder site in a few minutes! Thank you.
VERY useful James. Thanks a lot!
Hey James, I tried this but it looks like it messed with the mobile pro menu. Rather than having a slide-out drawer, it would contain it in the actual header. Any idea why the conflict would be happening?
Thank you very much for showing this to us!!!!
Thank you James! FYI I couldn't get it to work by setting the cdn link in advanced scripts and then adding the init directly. Pasting the code and then adding the init like you show in the video works. I hope to figure out what I am doing wrong with the url method.
Same here. Did every step correct. Did you get it fixed eventually?
Thank you for the tutorial it's is very helpful!
By any chance, do you have any solution to the mobile issue?
The off-page mobile menu is not clipped by the size of the header.
Thanks!
Awesome video! I implemented this on my site and really like it. I have a follow-up question regarding accordions.
When I open and then close the accordion, in some situations it causes the header to trigger and become visible.
I am looking at the following from the headroom team:
freeze method: When called, this method will freeze the current headroom's state (pinned or unpinned). Headroom will not react to the user's scroll. If you wish to re-enable the headroom's default behavior, you can call unfreeze method.
unfreeze method: When called, this method will resume headroom's default behavior. Headroom will pin or unpin when the user scrolls the page. By default, Headroom is not frozen, and calling this method before freeze will do nothing.
I think this maybe would solve the issue if the user is triggering the accordion?
Any thoughts would be greatly appreciated.
Tip: Use position sticky instead of position fixed if you don't want the header to overlap your content.
appsumo no longer using same effect. why do you think?
Because I was looking how to make it smooth show. like there's a little show transition. The same with appsumo
Mine just snaps in. no transition. my site is oxypinoy(dot)com
the blog post link tutorial is broken, 404
Apologies !! isotropic.co/sliding-sticky-header-for-your-website-headroom-js-tutorial/