Toggle header nav theme on page section visibility

[muzkore]

Hi all.

I have a situation I am trying to understand hoping to shine some light on calling functions from within Greensock.

I have a page that has a fixed page header nav bar (#structure-header). 

The page has three (at the moment) vertical sections (in #structure-content) and as I vertically scroll through them, I would like to ideally have it trigger a check on when each section gets to the top of the page and check if there is an attribute called 'data-header-nav' on that section tag. If it has it, add the value of that attribute as a class to the structure-header div.

I was also thinking, if a person scrolled back up to the previous section, would it remove the class and revert to the previous one?

 

Any help would be greatly appreciated and would help me understand how to call function code from within GSAP (if that is the best way to do it ofcourse).

 

Cheers

Murray

See the Pen qBRJgZx by muzKore (@muzKore) on CodePen

[akapowl]

 

Hey @muzkore, welcome to the forums.

 

You might want to take a look at the ScrollTrigger-Plugin which makes things like these a breeze.

 

This thread here contains two different ways for something like what you want (one working with the color values in data-attributes and one with classes)

 

 

 

For your specific example that could look something like this

 

See the Pen 47f5941e575ae1f6e7fdc5e683926565 by akapowl (@akapowl) on CodePen

 

 

[muzkore]

Hi akapowl

Thanks for the insight. I had looked at the ScrollTrigger plugin as it was actually what brought me into wanting to learn GSAP.

What you suggested actually did exactly what I was asking for and I learned a few new things about GSAP which I really appreciated. My question was actually about how to add something into the call like you did with toggleClass that actually would call a function which could say do a few things instead of just toggling a class. Maybe this is not a good way to do it but I guess I wanted to hear from someone in the know such as yourself as to the approach.

 

Thanks again for your time and insight. This community is amazing.

Cheers

Murray

[akapowl]

 

1 hour ago, muzkore said:

My question was actually about how to add something into the call like you did with toggleClass that actually would call a function which could say do a few things instead of just toggling a class. Maybe this is not a good way to do it [...]

 

Actually, as you can see in the thread I linked to, there are various approaches to something like this and I just thought using the built in toggle-class fitted your provided scenario the best.

 

If you wanted to call a function that would do multiple things when reaching a certain point scrolling, you could use ScrollTrigger's callbacks for that 

 

See the Pen 744ccc2e12eb4cb56b43ed1970a92f99 by akapowl (@akapowl) on CodePen

 

See the Pen qBdeVJY by GreenSock (@GreenSock) on CodePen

 

[muzkore]

mind blown.....

wow. I'm glad I was not holding my coffee when I saw this. I know it is so simple to some but that just blew my mind. So straight forward.

The power here is almost giving me a headache.

Thanks again. Wow.