GGQa Posted August 23, 2021 Share Posted August 23, 2021 Hello friends! I'm working on navi to my project. I wish it would hide when scrolling down, and show when scrolling up. I was able to achieve this effect using ScrollTrigger butI I'd like to add one more thing to my code, wchich is: Adding a background color to 'nav' element (when scrolling top). I wish it it wasn't visible to the user., and that menu start and ends its animation after the 'first' section. So it should hide and "secretaly change background" if user scrolls up and comes across a section called 'first' Do you have any tips? Thank u! I hope I made myself clear... See the Pen mdwdEzb by GGQa (@GGQa) on CodePen Link to comment Share on other sites More sharing options...
Cassie Posted August 23, 2021 Share Posted August 23, 2021 Hi there! I'm sorry I'm not quite understanding what it is you're wanting to do. Are you wanting the background color of the nav to match the section it's on? Could you maybe try explaining again - apologies! I've had a long day. 😅 1 Link to comment Share on other sites More sharing options...
GGQa Posted August 24, 2021 Author Share Posted August 24, 2021 Sorry, I had a long day too. I expressed myself vaquely. Here is a perfect example of what I want to achieve. Ideally, this navi should hide before the scroll is at the top. So, for example, the Trigger to hide the animation while scrolling up would be the "first" section. 1 Link to comment Share on other sites More sharing options...
Cassie Posted August 24, 2021 Share Posted August 24, 2021 The navigation on that site doesn't hide at all when scrolling to the top. The background color switches to transparent when it's up at the top though - is that what you're after? Because otherwise it's almost *exactly* the same as your demo. 1 Link to comment Share on other sites More sharing options...
GGQa Posted August 24, 2021 Author Share Posted August 24, 2021 Navigation while scrolling up adds a white background. In addition, I would like it to hide next to "first" section when scrolling up. Not just at the top. Scenario: 1. Page loaded 2. The menu is at the top in the Absolute position 3. I scroll down (menu is hidding) 4. I scroll up (menu is visible + white background + fixed position) 5. When I scroll up and Trigger find the "first" section (menu is hidding by transform, and return to absolute position without background) Link to comment Share on other sites More sharing options...
Solution Cassie Posted August 24, 2021 Solution Share Posted August 24, 2021 You can add more scrollTriggers to get more control like so - See the Pen powoOaV?editors=0010 by GreenSock (@GreenSock) on CodePen 2 Link to comment Share on other sites More sharing options...
Cassie Posted August 24, 2021 Share Posted August 24, 2021 Some of the logic needs a little finetuning - but that should set you off in the right direction. 1 Link to comment Share on other sites More sharing options...
GGQa Posted August 24, 2021 Author Share Posted August 24, 2021 Hmm... the first problem here is the visible effect of adding a background to the menu while scrolling. Second thing is I want to hide navigation with transform transform effect on meet "first" section. Actually in your example that menn changing position and background with some "progress". Link to comment Share on other sites More sharing options...
GGQa Posted August 24, 2021 Author Share Posted August 24, 2021 1 minute ago, Cassie said: Some of the logic needs a little finetuning - but that should set you off in the right direction. Oki, thank u Cassie. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now