Home Forums Community Forum Avada Sticky Header on Scroll Up Only

Only users with a registered purchase of Avada can post to the community forum. Please register your purchase here.
Viewing 15 posts - 1 through 15 (of 23 total)
  • Author
    Posts
  • Jetxpert-Envato
    Participant
    Post count: 146

    Hi there,

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

    Thanks!

    marklchaves
    Participant
    Post count: 673

    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
    Participant
    Post count: 146

    @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
    Participant
    Post count: 673

    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
    Participant
    Post count: 673

    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
    Participant
    Post count: 146

    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
    Participant
    Post count: 146

    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
    Participant
    Post count: 673

    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
    Participant
    Post count: 673

    Hi @jetxpert-envato,

    The Hide and Seek Header plugin is now available.

    Jetxpert-Envato
    Participant
    Post count: 146

    @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
    Participant
    Post count: 1

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

    Thanks so much.

    marklchaves
    Participant
    Post count: 673

    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
    Participant
    Post count: 673

    Hi Everyone,

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

    kevinsu0201
    Participant
    Post count: 2

    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
    Participant
    Post count: 673

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

Viewing 15 posts - 1 through 15 (of 23 total)
Only users with a registered purchase of Avada can post to the community forum. Please register your purchase here.