Para o site deste cliente, resolvi fazer dois cabeçalhos diferentes, um maior com várias informações que aparece ao abrir a página, e outro menor e fixo, apenas com o logo e o menu e que aparece ao rolar a página. Achei este tutorial: https://wpzone.co/wordpress-and-divi-code-snippets/different-header-on-scroll-in-divi-4-0/. Primeiro, é necessário acrescentar a id header-fixed na seção que deve ser fixa. Depois, vem o código jQuery:
//Cabeçalho diferente ao rolar a página
jQuery(document).ready(function(){
var header_fixed = jQuery("#header-fixed");
jQuery( header_fixed ).wrap("<div class='header-f-wrapper'></div>");
var header_f_wrapper = jQuery(".header-f-wrapper");
var height = jQuery(".et-l--header").height()+(20);
jQuery(window).scroll(function(){
if(jQuery(this).scrollTop()>height){
header_f_wrapper.addClass("header-show");
}
else{
header_f_wrapper.removeClass("header-show");
}
});
});É necessário também esse código CSS:
/*Cabeçalho diferente e fixo ao rolar*/
@media only screen and ( min-width: 960px ) {
.header-f-wrapper {
opacity:0;
z-index: 999;
position: fixed;
width:100%;
top: 0;
-webkit-transition: all 0.75s ease-out;
-moz-transition: all 0.75s ease-out;
-ms-transition: all 0.75s ease-out;
-o-transition: all 0.75s ease-out;
transition: all 0.75s ease-out;
}
.header-f-wrapper.header-show {
opacity:1;
}
.admin-bar #header-fixed{
top: 32px;
}
}
