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 topPosition = 0;


    $(window).scroll(function() {

        var scrollMovement = $(window).scrollTop();

        if (topPosition < 150) {} else {             if (scrollMovement > topPosition) {
                $('#dd-header').removeClass('show-header');
                $('#dd-header').addClass('hide-header');
            } else {
                $('#dd-header').removeClass('hide-header');
                $('#dd-header').addClass('show-header');
            }
        }
        topPosition = scrollMovement;
    });

});

* 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;
}
 
.show-header {
opacity: 1;
margin-top: 0px!important;
}
 
#dd-header {
-webkit-transition: all 0.5s ease !important;
-moz-transition: all 0.5s ease !important;
-o-transition: all 0.5s ease !important;
-ms-transition: all 0.5s ease !important;
transition: all 0.5s ease !important;
}

* Place the previous code in between style tags:

<style>

THE CODE HERE

</style>

🥳 That’s it!

👉 Subscribe to our YouTube channel

More Videos