jemima

Hey @ZachSaucier thanks for the suggestions :) I was hoping to get like a TweenMax oriented solution to the problem instead of having to detect the scrolling position with the custom code above. I've seen something about using Timeline to control the progress of the animation so if there was a native way to tie the progress from 0 to 100% based on the scrolling, for example. Any help appreciated, thanks again :D

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.