Search in:
Suggested Search: installation, configuration
Search in:
Suggested Search: installation, configuration

hide on scroll down, show on scroll up

Home › Forums › Pro Support › hide on scroll down, show on scroll up

Tagged: 

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • October 22, 2019 at 5:00 am #69523
    Jacek FrankowiczJacek Frankowicz
    Participant

    Hi, I did not see this one as an option
    For my desktop usual header (class “head”) I use

    <script>
    var prevScrollpos = window.pageYOffset;
    window.onscroll = function() {
    var currentScrollPos = window.pageYOffset;
    if (prevScrollpos > currentScrollPos) {
    document.getElementById(“head”).style.top = “0”;
    } else {
    document.getElementById(“head”).style.top = “-90px”;
    }
    prevScrollpos = currentScrollPos;
    }
    </script>

    Should I div up the menu and do the same or is there an easier way?
    Thanks
    Jack

    October 22, 2019 at 6:34 am #69524
    Kriti SharmaKriti Sharma
    Keymaster

    Hi Jack,

    Hope you are doing great!

    As you are trying to hide the menu container when the user scrolls down the page and show the container when the user scroll up the page. With Responsive Menu pro plugin, you can do this in an easier way.

      1. Open Responsive Menu Pro plugin setting.
      2. Go to Container tab.
      3. Scroll down to Keyboard Shortcuts.
      4. You can choose from the given shortcut options to open and close the menu container.
      5. Use ‘Down’ to close the container and ‘Up’ to show the container.

    Hope this solves the issue.

    Regards,
    Kriti

    Attachments:
    You must be logged in to view attached files.
    October 22, 2019 at 6:43 am #69526
    Jacek FrankowiczJacek Frankowicz
    Participant

    Thank you for the quick reply!
    Although that seems to work on keyboard shortcuts and only on the container. I was more interested in the menu (responsive-menu-pro-button, I think?” …the three lines that open the container.
    Also I wanted this to happen on mobile swipe down and swipe up.

    Sorry I wasn’t clear
    Thanks,
    Jack

    October 22, 2019 at 6:58 am #69527
    Kriti SharmaKriti Sharma
    Keymaster

    Hi Jack,

    If you want to close the menu container on scroll down(on desktops) and swipe down(on mobiles) gestures. You can enable the options ‘Close on Page Scroll'(for desktops) and ‘Enable Touch Gestures'(for mobiles) which are just above the keyboard shortcuts.

    If you want to hide/show the menu button on scroll down/up the webpage. You will have to write custom code for this functionality. However, I suggest you not to add this functionality on the website. Because this might confuse naive users rather than attracting them.

    Regards,
    Kriti

    October 22, 2019 at 7:06 am #69528
    Jacek FrankowiczJacek Frankowicz
    Participant

    I just noticed the gestures part, that’s great!
    …and you may be right… the menu button isn’t regarded by users the same way as a hiding header… might be something to test out first.

    Thank you for the quick replies and help 🙂
    Thanks
    Jack

    October 22, 2019 at 7:10 am #69529
    Kriti SharmaKriti Sharma
    Keymaster

    Hi Jack,

    Glad to know that you are satisfied with our support. Thanks for reaching out to us.

    Regards,
    Kriti

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘hide on scroll down, show on scroll up’ is closed to new replies.