I need to make an fixed navbar go down/up when an second bar (before it) show/hide smoothly (using Interactions 2.0).
I am trying to use the “while scrolling into view”. This way, the navbar will go up according the second bar position. Both will look like they are “sticky” together, until the first one disappear.
NOTE: I know about the “Scroll into view” Interaction. I DON’T want to use it, because it will leave a white gap When the first bar is starting to hide.
I defined the following Boundaries:
Start animation (0%) when element > Is fully visible (offset 100%)
End animation (100%) when element > Is fully invisible (no offset)
If you look the Boundaries demo, it will start when the element top touch the window top, and end when the element bottom touch the window top (out of viewport)…
But it isn’t working as intended. The animation is staring on 97% and ending on 100%.
Please check the demo link for more info.
I am using the Interactions 2.0.
EDIT: Those values depends on the monitor height. Small monitors will start in 80% for instance. Looking at the boundaries, it should start on 0%.