Greetings,
I have primaryHeader which is shown when landing on the site. As you scroll down it should fade in the secondary header and as it is fixed by its nature, it stays on top. Currently I’m using the following :

Now, what I want to somehow add is the following :

When the user reaches the bottom of the page, the secondHeader (.header-second) should fadeOut again, making the footer menu the main focus of the visitor. Whatever I tried didn’t work, resulting primarily in making the secondHeader appear and stay when reaching the top of the page again (as it bugs out with the >= condition).

Any help and suggestions appreciated :)!
I’d look into this stackoverflow post for detecting the bottom.
Now for your initial code, maybe consider switching to if/else if – and you may want to verify your values for topPosition if it’s bugging out, to verify it’s returning the value you’re expecting.
Members
Online

source