Dear all,
I’ve created a ‘second header’, one that shall only fade in once viewers of the website scroll down and pass a certain point. It’s a typical header with a company logo and a menu with Home, About, Projects, …
That all works completely fine UNLESS one clicks on the Home button on the header, where the page jumps back to the landing page. Here I’d prefer it when the original header would come rather than the second one. Also, once you start scrolling down, it changes back to the original header, just to change again to the second header once one passes the defined point again where the header changes. So it’s a bit of a messy second-first-second header situation.
Is this something that can be fixed? Or does it simply have to do with the fact that when clicking ‘Home’ it’s as if that specified point has already been passed and thus the new header appears? But would there be a solution to say if that happens, the second header is just seen everywhere rather than changing back to the first for a brief moment and then changing to the second once again.
The code I used is the following:
let fadeOptions = {
“duration” : 300 ,
}
export function Newscrolline_viewportEnter ( event ) {
$w ( ‘#header2’ ). hide ( “fade” , fadeOptions );
$w ( ‘#header3’ ). hide ( “fade” , fadeOptions );
}
export function Newscrolline_viewportLeave ( event ) {
$w ( ‘#header2’ ). show ( “fade” , fadeOptions );
$w ( ‘#header3’ ). show ( “fade” , fadeOptions );
}
Thanks so much for your help, highly appreciated!
