Request Tutorial - Show navbar on scroll-up and hide when scroll-down

Design help General
1

Hi Webflow and Everyone

Does anyone know how to do this.
“Show navbar on scroll-up and hide when scroll-down”

Something like this Auto-Hide Sticky Header demo by Osvaldas Valutis

This is very helpful on mobile browsing.
The menu will hide once the user scroll to DOWN direction.
And will Show Menu once the user scroll to UP direction.

Thanks in advance.

3 Likes
2

Well, I have discovered how to do this.

I gave my nav bar an ID called MagicMenu
then just put this code in your custom footer and it will works just wonderful.

<script type="text/javascript">

// Hide #MagicMenu on on scroll down
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('#MagicMenu').outerHeight();

$(window).scroll(function(event){
    didScroll = true;
});

setInterval(function() {
    if (didScroll) {
        hasScrolled();
        didScroll = false;
    }
}, 250);

function hasScrolled() {
    var st = $(this).scrollTop();
    
    // Make sure they scroll more than delta
    if(Math.abs(lastScrollTop - st) <= delta)
        return;
    
    // If they scrolled down and are past the navbar, add class .MagicMenu-up.
    // This is necessary so you never see what is "behind" the navbar.
    if (st > lastScrollTop && st > navbarHeight){
        // Scroll Down
        $('#MagicMenu').fadeOut(500);
    } else {
        // Scroll Up
        if(st + $(window).height() < $(document).height()) {
            $('#MagicMenu').fadeIn(500);
        }
    }
    
    lastScrollTop = st;
}
</script>

Full tutorial is here in this article

6 Likes
3

Hello @KMB,
Glad you figured it out. And thank you for sharing with community! :smiley:

Cheers,
Anna

2 Likes
4

Just in case, you have to add

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

immediately before that code :wink:

5

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.