Jump to content
Search Community

why toggle class is not adding the class when triggered

rohitsinghshan test
Moderator Tag

Recommended Posts

 

I saw 2 potential problems.

Your section in question appears to be  the last on the page. This means there is a good chance the top will never reach the top of the window. You have trigger set to "top top".

You also seem to want to change the trigger element to position fixed. that seems like a logic problem as a fixed element will never leave the viewport.

 

in the modified demo below you can scroll to the bottom and you will see the background color turn red which verifies that the stick class is being applied. I set the start to "top bottom" so that we could be somewhat sure that section reached the trigger point.

 

See the Pen vYpdOWL?editors=0010 by snorkltv (@snorkltv) on CodePen

 

in the future please take the time to minimize your demo and remove extra js, css and html. it was difficult to hunt down where everything was.

 

  • Like 4
Link to comment
Share on other sites

21 minutes ago, Carl said:

 

I saw 2 potential problems.

Your section in question appears to be  the last on the page. This means there is a good chance the top will never reach the top of the window. You have trigger set to "top top".

You also seem to want to change the trigger element to position fixed. that seems like a logic problem as a fixed element will never leave the viewport.

 

in the modified demo below you can scroll to the bottom and you will see the background color turn red which verifies that the stick class is being applied. I set the start to "top bottom" so that we could be somewhat sure that section reached the trigger point.

 

 

 

 

in the future please take the time to minimize your demo and remove extra js, css and html. it was difficult to hunt down where everything was.

 

Sorry for lengthy code and Yeah sir, Sticky class is applying at the bottom where I have to remove it, I want to apply it when we scroll to  <div class="scene-brush-alt" id="scene-brush-alt"> and end at 

<div class=" scene-alt scene-details-alt  scene-7-alt" id="scene-7-alt">
Link to comment
Share on other sites

if you want a ScrollTrigger to end when another trigger reaches a certain point you can specify another element as the endTrigger

Quote


endTrigger    String | Element - The element (or selector text for the element) whose position in the normal document flow is used for calculating where the ScrollTrigger ends. You don't need to define an endTrigger unless it's DIFFERENT than the trigger element because that's the default.

 

 

 

https://greensock.com/docs/v3/Plugins/ScrollTrigger

  • Like 4
Link to comment
Share on other sites

15 hours ago, Carl said:

if you want a ScrollTrigger to end when another trigger reaches a certain point you can specify another element as the endTrigger

 

 

https://greensock.com/docs/v3/Plugins/ScrollTrigger

I'm using endtrigger sir
 

    let fixed = gsap.timeline({
  scrollTrigger: {
    trigger: "#scene-brush-alt",
    endTrigger:"#scene-7-alt",
    start: "top top",
    end: "bottom+=10",
    toggleClass: "fixed"
  },
});
Link to comment
Share on other sites

very good. i guess I missed that. 

If you would like more help please create a new, reduced demo. I suspect you could replicate whatever issue you have with 20% of the code you have and greatly increase your chance of getting quick help.

 

When you make your demo please keep in mind the fact that no one here is familiar with your project or your naming conventions.

 

ids like "scene-brush-alt" have no relation to what we see on the screen. same with "scene-7-alt".

 

Also keep in mind that most of the people trying to help you are only fluent in English. 

better to have text that says "Section 1 Text" than "Die neuen Dr.BEST GreenClean INTERDENTAL"

 

My best advice create 3 colored divs. This way we can clearly see where they begin and end.

First section just creates room to scroll

Second section is the section you want to toggle the class of

Third section is the one you want to use for the endTrigger

 

Start small and only add things that help replicate the issue you are facing.

Hope this helps

 

 

  • Like 2
Link to comment
Share on other sites

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

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...