Avada Sticky Header on Scroll Up Only

[Jetxpert-Envato]

#692216

Hi there,

Anybody know how to disable the sticky header when someone is scrolling down? (web page content traveling upward).

Thanks!

[marklchaves]

#692887

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!

[Jetxpert-Envato]

#692911

@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!

[marklchaves]

#692947

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.

https://imgur.com/a/O0aCXZa

Thanks!

P.s. When I have more time, I’ll try to write up the code to hide the sticky menu when scrolling down.

[marklchaves]

#693803

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!

[Jetxpert-Envato]

#693990

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!

[Jetxpert-Envato]

#708997

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!

[marklchaves]

#709099

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

[marklchaves]

#709980

Hi @jetxpert-envato,

The Hide and Seek Header plugin is now available.

[Jetxpert-Envato]

#710610

@marklchaves,

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!

[breturi7]

#710659

Fantastic! Thanks so much for that plugin @marklchaves. I was looking for a way to do that.

Thanks so much.

[marklchaves]

#710964

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!

[marklchaves]

#720297

Hi Everyone,

Hide and Seek Header version 1.0 is now available on WordPress.org! 😉

[kevinsu0201]

#733579

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!

[marklchaves]

#733685

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! 🙂

[Author]

Posts