Hide/Reveal your Sticky Header on Scroll

Show/Hide your Header based on scroll direction!

Learn how to Hide your Header while Scrolling Down & Reveal While Scrolling Up:

Create a new Header from Theme Builder
Add a Section with your DiviMenus module inside
Make your Section Sticky

Section > Advaced > Scroll Effects > Sticky Position > Sticky to Top

Paste this into Section → Advanced → CSS ID:
dd-header

By assigning this ID to this Section, you will prevent this effect from being applied to other sections on the same page.

Paste this into Divi → Theme Options → Integration → Head*
jQuery(function($) {
    var lastScrollTop = $(window).scrollTop();
    $(window).scroll(function() {
        var scrollTop = $(window).scrollTop();
        if (scrollTop > 150) {
            if (lastScrollTop > scrollTop) $('#dd-header').removeClass('hide-header').addClass('show-header');
            if (lastScrollTop < scrollTop) $('#dd-header').removeClass('show-header').addClass('hide-header');
        } else $('#dd-header').removeClass('hide-header');
        lastScrollTop = scrollTop;
    });
});

* Place the previous code in between script tags:

<script>

THE CODE HERE

</script>

Paste this into Divi → Theme Options → Integration → Head*
.hide-header {
    opacity: 0;
    margin-top: -150px!important;
    transition: all 0.5s ease;
  }

.show-header {
    opacity: 1;
    margin-top: 0px!important;
    transition: all 0.5s ease;
  }

* Place the previous code in between style tags:

<style>

THE CODE HERE

</style>

🥳 That’s it!

👉 Subscribe to our YouTube channel

More Videos