moonIMD Posted May 15, 2023 Share Posted May 15, 2023 We have few sections with a data attribute (data-name) on each. We want to update the body classname when it enters the section. The data-name is the classname that we want to add to body. Below is my code, but it's not working: const updateBodyClassName = (name) => { //code to add/update classname to body/html class via data attribute (data-name) from section } const sections = gsap.utils.toArray('.section'); sections.forEach(section => { ScrollTrigger.create({ trigger: section, start: 'top center', end: 'somehow get the height of each section(??)', onEnter: () => updateBodyClassName(section.dataset.name), markers: true }) }); HTML: <div class="section" data-name="class1"> <h1>One</h1> </div> <div class="section" data-name="class2"> <h1>Two</h1> </div> <div class="section" data-name="class3"> <h1>Three</h1> </div> #1) I am trying to get the height of the sections since the height varies. This is for the 'end' parameter in the ScrollTrigger. #2) Not sure is there a way to update the body/html classname when we enter a section. I know there is a toggleClass, but this isn't what we need, since the class names are all different for each section. In the code, I have 'onEnter', so when it enters a section it will trigger the updateBodyClassName() function. In this function, it should go update the body/html class name: const updateBodyClassName = (name) => { //code to add/update classname to body/html class via data attribute (data-name) from section } For example, when we scroll to or enter section 1, the section 'data-name' value should get added to the body/html class, like below: <html class="no-js class1"> When it enter section 2, the section 2 'data-name' value should replace 'class1' from the html class (not appending class name), like below: <html class="no-js class2"> Is there a way to add a class name to body/html when it enters a section, then somehow replace the newly added class name when it enter another section? Thank you! Link to comment Share on other sites More sharing options...
Carl Posted May 15, 2023 Share Posted May 15, 2023 Hi in the future it would really help if you could provide a minimal demo. #1) I am trying to get the height of the sections since the height varies. This is for the 'end' parameter in the ScrollTrigger. ScrollTrigger automatically measures the trigger and you have access to its "bottom" so you can just test when the bottom reaches a certain point. For instance if you want a section to end when its bottom reaches the top of the viewport you would just use end:"bottom top" (which is the default). If you want the measurement perhaps you just need element.offsetHeight. I log this out in the demo. #2 add and remove class names you can use classList.add() and classList.remove() you'll see in my demo I store a reference to className, previousClassName, and nextClassName so that each scrolltrigger can do stuff regarding the next and previous sections class names. Since you have sections with different heights it may be possible that multiple sections are visible fully at the same time. the way the demo is currently set up each section will set its className to the body when it enters the viewport in both directions. when it leaves the viewport in both directions it will remove its class as well See the Pen NWOBJde?editors=0011 by snorkltv (@snorkltv) on CodePen notice when you got to the bottom of the page the body will be purple and just a little bit of the bottom of the pink section will be visible up top. if you scroll back up pink will come into view but the background won't become pink because the bottom of the pink section never crosses the top of the viewport. bottom of blue will come into view but since purple may still be a bit visible you won't see the background turn to blue until the purple class is removed (when purple top passes bottom of viewport). This may seem awkward but it's behaving as it is told and things like this only come up if you have many short sections. Hopefully this demo shows enough for you to tweak it to your needs. 3 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