Avada › Forums › Community Forum › Avada Sticky Header on Scroll Up Only
-
AuthorPosts
-
Hi there,
Anybody know how to disable the sticky header when someone is scrolling down? (web page content traveling upward).
Thanks!
Hi,
You would need JavaScript to detect the scroll direction, then toggle the sticky header based on the direction.
Here’s a JavaScript demo. Make sure you open the CodePen console when scrolling.
https://codepen.io/marklchaves/pen/RwNOVzQ?editors=1111
Let me know if you get this to work!
@marklchavez,
Thank you. Opened and ran codepen. Unfortunately, did not see any effects based on the code you provided.
Can you provide more details on how to use it to solve my first inquiry?
Cheers!
Hi @jetxpert-envato,
Sorry I wasn’t more clear. You’ll need to open the CodePen console. And, this demo just shows how to detect window scroll up/down.
Here’s a short gif on how to view the console.
Thanks!
P.s. When I have more time, I’ll try to write up the code to hide the sticky menu when scrolling down.
Hi @jetxpert-envato,
I updated my proof of concept to include a header that disappears on scroll down and reappears on scroll up. It builds on the JavaScript I shared earlier.
https://codepen.io/marklchaves/pen/RwNOVzQ?editors=0100
So, the fun part will be applying this to Avada.
Shout if you have any questions!
Hi @marklchaves,
Thank you! We need to digest your info and other found on the net.
Time permitting, we’ll test several codes under a staging environment and report back here.
Cheers!
Hi @marklchaves,
We are still looking into this. So far, no dice. So, back to you.
Any chance you can condense your code to just one PHP snippet and one CSS file to make this work – or – just one PHP snippet that takes advantage of theme user’s style settings?
Thank you. Cheers!
Hi @jetxpert-envato,
Let me see if I can make some time later this week to port my code to WordPress. I’ll make a plugin for it so it plays nice with themes. 😉
Stay tuned.
mark
Hi @jetxpert-envato,
The Hide and Seek Header plugin is now available.
Wow! Installed your plugin. Works like a charm. Bought you a cup of java. Thank you.
Dear Community:
To see this plugin in action, click here and scroll up/down. Sticky header disappears when you scroll down.
Cheers!
Fantastic! Thanks so much for that plugin @marklchaves. I was looking for a way to do that.
Thanks so much.
Hi @jetxpert-envato, thank you for the cuppa Joe! Glad it’s working for you.
Hi @breturi7, wonderful to hear.
Everyone, I plan to make a couple more enhancements before submitting the Hide and Seek Header plugin to the WordPress.org pluing directory.
Here’s the current roadmap. I’ll try to keep it updated.
Please report any issues or enhancment request on the GitHub repo for now. Shout if you have any questions as always 😉
Share & enjoy!
Hi Everyone,
Hide and Seek Header version 1.0 is now available on WordPress.org! 😉
Thanks a million for sharing the Hide and Seek Header plugin @marklchaves!!!
I am a self-studying newbee on wordpress and using the AVADA theme. You plugin works pretty great for my site.
I was wondering any chance to make some offset to the plugin? Because right now it seems little bit too sensitive, especially on mobile. When I slide the screen down (the content going up), with my hands touching the screen and causing tiny little up moving unintenionally, you will see the sticky header shows up quite frequently, which is a little bit odd. So I was thinking would it be better to add some offset to stop it from happening. Hope I discribe clearly the problem. And I really wish to get your attention on this. Thanks again!Hello @kevinsu0201,
I appreciate your feedback. I’ll try to reproduce and determine how to address this. See the GitHub issue for progress updates. Thanks again! 🙂
-
AuthorPosts
- You must be logged in to reply to this topic.