Divi allows the default header to be made into a "fixed" header that remains visible as you scroll down the page. If you'd like to temporarily hide the Divi header as you scroll past a particular section, here's how to do it.
Fixed header shown while scrolling…
… but hidden on a specific section
Hide Divi header when scrolling past a specific section using jQuery
To hide the fixed header when scrolling down a specific section, we can use a bit of JavaScript / jQuery.
First, add a class named "hide-header-section" to the section where you want the header to disappear, at:
Section Settings > Advanced > CSS ID & Classes > CSS Class
Then add this jQuery script to your site:
<script>
jQuery(document).ready(function($){
var section = $('.hide-header-section'); // replace with your section ID or class
var header = $('#main-header');
$(window).scroll(function() {
var scroll = $(window).scrollTop();
var offset = section.offset().top;
var height = section.height();
if (scroll > offset && scroll < offset + height) {
header.addClass('hide-header');
} else {
header.removeClass('hide-header');
}
});
});
</script>Related Post: Adding JavaScript / jQuery to Divi.
This script will listen for the scroll event and check if the user's scroll position is within the section. If it is, it will add the 'hide-header' class to the header; if it isn't, it removes the class.
Next, add this CSS to your site to hide the header when the 'hide-header' class is added:
#main-header.hide-header {
display: none !important;
}Related Post: Adding CSS to the Divi Theme
Now you should see the header normally as you're scrolling down, but when you scroll past this particular section, the header will temporarily be hidden.
0 Comments