I'm trying to create a 'sticky' menu that appears after a certain breakpoint and scrolls according to the user scrolling.
Basically, when you first start scrolling on the page, the menu should disappear relatively with the page (scroll up normally) but after a breakpoint has been reached, the menu should slide down according to how the user is scrolling.
An example of the animation is the menu on the videinfra.com site. The menu translates according to the same number of px that the user scrolls up.
I'm currently setting the menu's position to relative before the breakpoint and once the breakpoint has been reached, I set the position to sticky and translate according to the user scroll, using the code here:
const transitionTo = isScrollDown
? Math.min(
currentTranslateLocation + scrollDiff,
VISIBLE_NAVIGATION_POSITION
)
: Math.max(
currentTranslateLocation + scrollDiff,
INVISIBLE_NAVIGATION_POSITION
);
TweenMax.to(navigationClassname, 0.5, { y: transitionTo });
The problem is the scrolling looks more... animated than the example in the site above, I'd really like to achieve the smooth natural scrolling as shown there.
Also, when the page scrolls really fast, the menu tends to glitch but I can't figure out how to stop that.
Alternatively, if there's another method to achieve this instead of using TweenMax, I'd be glad to implement that instead.