Jump to content
Search Community

Fixed header with scrolltrigger

Charlyta test
Moderator Tag

Go to solution Solved by akapowl,

Recommended Posts

Hello!

I have read all the posts about this question but didn´t solve my problem about getting the header fixed while scrolling. I am using Locomotive too because I have no money to get somoothscroll.. sorry for this. Any help will be really appreciate it. 

I have tried adding class, etc. without result..  :( 

 

See the Pen poKaLQW by charlyta (@charlyta) on CodePen

Link to comment
Share on other sites

  • Solution

Hello there!

 

With just about ANY smooth-scrolling library, elements with position: fixed do not behave as you might expect inside the container that gets the transforms for the smooth-scrolling applied, as the context for the fixed positioning changes. This is nothing GSAP related, it's just how browsers work. You will either need to take the elements you want to appear fixed out of that container, or you could leverage ScrollTriggre's pinning to emulate a fixed appearance.

 

Here is a fork of your codepen demo, where the header appears fixed, because I took it out of the data-scroll-container. I also added a high z-index for the scrollbar element via CSS, as it appeared below the header when I changed what I mentioned above - but that again is nothing GSAP related.

 

See the Pen vYrjXGo by akapowl (@akapowl) on CodePen

 

  • Like 3
  • Thanks 1
Link to comment
Share on other sites

Hi,

 

You can use the toggleClass property in the ScrollTrigger config object. From the docs:

 

String | Object - Adds/removes a class to an element (or multiple elements) when the ScrollTrigger toggles active/inactive. It can be either of the following:
String - The name of the class to add to the trigger element, like toggleClass: "active"
Object - To toggle a class for elements other than just the trigger, use the object syntax like toggleClass: {targets: ".my-selector", className: "active"}. The "targets" can be selector text, a direct reference to an element, or an Array of elements.
Note that toggleActions don't apply to toggleClass. To have toggle class names in a different way, use the callback functions (onEnter, onLeave, onLeaveBack, and onEnterBack).

 

Also you should take a look at this thread where a different approach is implemented in those examples:

Let us know if you have more questions.

 

Happy Tweening!

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

18 hours ago, Charlyta said:

Could I use in your example use ScrollTrigger.isScrolling( ) to apply a class to the aheader while scrolling or is not the best way to do it?

 

What's best to do really depends on what the purpose is and in what exact scenario it takes place in - unfortunately you have given very little information about that.

 

ScrollTrigger.isScrolling() is not an eventListener per se, the way I see it - I would understand it more as a check wether ScrollTrigger is scrolling on a given event that you implemented yourself in some way.

 

If all you want to do is to add a class to an element whenever a user starts scrolling (and maybe remove it when the scrolling stops), I would suggest making use of ScrollTrigger's eventListeners for 'scrollStart' and 'scrollEnd'. Have a look at the docs for more information.

 

See the Pen VwddLJW by akapowl (@akapowl) on CodePen

 

  • Like 2
  • Thanks 1
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...