Add a section to the theme builder header
- position is fixed at the top
- give it the ID global-header-section
Then add a row with the content and a code module with the following script and css. Derived from https://www.elegantthemes.com/blog/divi-resources/how-to-reveal-your-global-header-while-scrolling-up-hide-while-scrolling-down-with-divig
<script>
jQuery(function($){
var topPosition = 0;
$(window).scroll(function() {
var scrollMovement = $(window).scrollTop();
if (topPosition < 200 ){
}
else{
if(scrollMovement > topPosition) {
$('#global-header-section').removeClass('show-header');
$('#global-header-section').addClass('hide-header');
} else {
$('#global-header-section').removeClass('hide-header');
$('#global-header-section').addClass('show-header');
}
}
topPosition = scrollMovement;
});
});
</script>
<style>
#main-content{
margin-top: 0vw;
}
.hide-header {
opacity: 0;
margin-top: -200px !important;
}
.show-header {
opacity: 1;
margin-top: 0px !important;
}
#global-header-section {
transition: all 1s ease !important;
}
</style>
Code language: HTML, XML (xml)