Share Posted October 7, 2020 Hi, I have a page where I have x number of containers/divs. Some of these have defined background colors, and should thereby change body background color once they getting visible as you scroll down. But also change back to their color if user scrolls back up. I'm using React and my thought was to create a custom hook that I connect to the node/container/div that should be used as trigger. That is all working fine, if that seems to be a good approach, I basically create a new ScrollTrigger every time that hook is being used. However, some questions: - I guess I have to use the callbacks for onEnter and onEnterBack in order to add/remove the body background color class? - What should my start values be? "top top" (=if top of element hits top of viewport) if a "colored" section is a top of page? And for other sections "top bottom" (=if top of element reaches bottom of viewport)? - If the first section on the page should set a specific background color, and then the user scrolls down a bit, the next section becomes visible = trigger color change, but then the user scrolls back up again, how can I tell if it should transition back to it's color again then? onEnterBack wont get triggered in this case..? Link to comment Share on other sites More sharing options...
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 account
Already have an account? Sign in here.Sign In Now