Show/hide specific header bar based on visible section ID

[omdot]

Hi there.

I have multiple different sticky header bars that are to be active based on the page scroll. This works fine using the Trigger Selector, as soon as you reach a specific ID when scrolling through the page, a correlating header bar is activated.
The problem I’m having is that the previous header bar isn’t deactivated, resulting in divergent header bars overlapping. Since they are semitransparent and with different heights, this isn’t really good.
Now, I did find an option to render a specific header bar visible/invisible based on pixels via JavaScript but that’s not really optimal, since the height in pixels you have to scroll can vary a lot.

jQuery(function($){
 $(window).scroll(function(){
var aTop = $('#hauptheader').height()+900;
if($(this).scrollTop()>=aTop){
 $('#hauptheader').hide();    
} else {
 $('#hauptheader').show();   
}
});
});

Is there an option to have an ID (e.g. “#zwo” trigger the .hide()?
I suck at JS…

Thanks in advance,
om.

[tristup]

Hi Om,

Thanks for reaching out.
It will be very difficult to recognize the issue without investigating through the admin dashboard. Can you please provide login credentials of your broken site in a secure note to examine it further, including:

– WordPress Site URL & Login URL
– Specific page and Header where you are having this issue.
– WordPress Admin username/password

To create a secure note, click the key icon underneath any of your posts.

Thanks

[nabeel]

Hi Om,

Thank you for providing the credentials. Please note that custom development is outside the scope of support we can offer. If you’re not comfortable making changes yourself then you may wish to consult with a developer.

You probably can achieve the similar setup within Header Builder without a use of custom coding, here’s a similar thread that you can follow:

How to change logo on scroll

Hi @Mastres, Thank you for reaching out to us. Since you’re using Pro, you don’t need custom coding. First I’d recommend you to remove the code and let’s achieve this within the header builder. First you need to create two bars, each with different logos in it, simply duplicate your first Bar and change the logo in it. [image] Inspect your first Bar and turn off the Sticky Bar option: [image] Inspect your second Bar, turn on the Hide Initially option and also turn on the Sticky Bar option …

Thank you for understanding!

[omdot]

Well… that did not help. At all. In fact it’s got nothing to do with what I described to be the desired outcome.

[tristup]

Hi Om,

It seems that you want to show/hide a specific section of your header based on the section of the page showing. If that is the case, it requires customization and beyond the scope of our theme support. As my colleague suggested, I would also suggest you hire a developer who can assist you to do the customization or you can avail of our newly launched service called One, where the customization questions are answered.

Thanks