Jump to content
Search Community

Sticky header gives wrong height when already scrolled

IndM test
Moderator Tag

Go to solution Solved by IndM,

Recommended Posts

This code creates a sticky header from a navigation.
When the page loads and you already scroll further in the page, the pinned height and start position are off from the original starting point.
Perhaps due the sticky class that already have been put on it?

I can't reproduce it in the codepen, but I made a little screen recording.
The code in the codepen is the same I use, but cleaned up.

https://app.usebubbles.com/83E8qSeoEDVNLebLMRuR3r/indy-s-video-recording
 

I'm clueless what the problem is .

See the Pen xxJjGQz by indy-meermans (@indy-meermans) on CodePen

Link to comment
Share on other sites

Hi,

 

In your example there is an error. An element with this class is nowhere in the DOM header-layout, so this doesn't work as expected:

ScrollTrigger.create({
  start: '1px top',
  trigger: '.header-layout', // <- no element found
  pin: '.js-page-header',
  end: 99999,
  markers: true,
  pinSpacing: false,
  invalidateOnRefresh: true,
})

Take a look at this demos for inspiration:

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

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

 

Happy Tweening!

  • Like 2
Link to comment
Share on other sites

@Rodrigo Hi! I accidentally removed to much 😝. I've updated the code and tried one of the examples above but no luck.
The problem is (I think) when the page loads and the class sticky is already active, so the element shrinks. The pin will take that height so when you scroll back to top to put the navigation back on it's place. The scrolltrigger still thinks it has the same height as the class sticky.

That's the behavior shown in the screenrecording I posted.

 

  • Like 1
Link to comment
Share on other sites

Do you still need help mate or are you ok?

Looks like the demos Rodrigo posted are slightly better ways of approaching this - it's always best to do animation with GSAP rather than by swopping out CSS classes where possible!

 

If I were you I'd take a look at the demos and give it a little refactor.

  • Like 1
Link to comment
Share on other sites

@Cassie The problem is that in the demo's rodrigo posted, the header element is a standalone and not wrapped inside a div. In my case, it's supposed to be wrapped in a hero wrapper due some options and configurations on the hero element.

So with my code, I tried to achieve with a pinned item to recreate a sticky element.  That first scroll the header as it is and after like 180pixels it adds the sticky__init class.

That code works perfect and it does the job for me. As shown in the video, it only happens when the page is already scrolled further on load.
Due some elements that are set to display none when scrolled further (that's the sticky__init class), the header becomes smaller.

So when scrolling back to the top the scrolltrigger still thinks the header element is that small, so the starting points and pinned height are way off.

If wanted, I can send you the development link in chat, so you can see the issue better.
 

Link to comment
Share on other sites

It still sounds to me like a rethink would be ideal here - if you remake it with some tweens instead of classes then ScrollTrigger will understand what's going on and you won't have these conflicts.

 

Rodrigo's pen is a simplified example, but you could easily add a container in there if you needed. The concept of using GSAP to animate instead of classes is the same

Feel free to give us an updated codepen with a little more complexity for us to take a look, but please no dev links. I'm afraid we don't have the resources to be looking through live sites.
 

  • Like 2
Link to comment
Share on other sites

  • Solution

For everyone who experience the same issue:
Gsap needs to be executed only when everything is loaded. Otherwise the calculations are way off.

I fixed it in this case with wrapping the code around my gsap code so it will be executed when the dom is fully loaded. 

 

  document.onreadystatechange = () => {
    if (document.readyState === 'complete') {
      
      // Gsap code here
    }
  }

 

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...