@Davidlin_ch12, I have to apologize I cut much of my site out because I thought it would make the problem simpler to solve, but It really just confused anyone trying to help and makes my site look idiotic.
That's my fault I'm sorry.
Here is the new share link:
Edit: I made sure "mypage top section" 's parents all have overflow set to hidden.
You'll see why my positioning has to be absolute on "mypage" and why the "mypage top section" has to be the one who scrolls. Because other pages are coming into view and "mypage" is going out of view depending on the navigation route.
I can't for the life of me figure it out I have been messing with it again for a while.
The browser knows what is in view and what is not in view, beause it determines the size of the scrollbar dynamic piece.
So the browser knows when the triggering should take place (when my element comes in view), so why would the triggering not be happening?
Thanks so much and I'm sorry about trimming the site down before.
Edit: the really interesting part, and what might lead to the solution is this. If it (the bottom element on the "mypage top section") is in view to start with, I see the effect. But when it's not in view and I scroll to it (expecting the effect to bring it in view) it stays hidden and never does anything.