Jump to content
GreenSock

Samuele

Pin element under accordion

Go to solution Solved by Cassie,

Recommended Posts

Hi all, probably i'm a bit confused but i cannot figured out how to correctly implement an accordion and a "pin" section.

I set the accordion with this function:
 

    accordionNavbar.addEventListener("click", function () {
      if (panel.style.maxHeight) {
        panel.style.maxHeight = null;
        panel.classList.remove("opened");
      } else {
        panel.style.maxHeight = panel.scrollHeight + "px";
        panel.classList.add("opened");
      }
    });

 

The page's content is pushed down as the height is increased on "click " event, but the pin section doesn't update its values (start/end).
I would expect the start/end values to be recalculated as well...

Am I missing something obvious? 

See the Pen jOZvBLg by sml-k (@sml-k) on CodePen

Link to comment
Share on other sites

  • Solution

Hey there!

 

You are indeed, but it's a common confusion, don't you worry!

You're missing the fact that ScrollTrigger pre-calculates positions for performance reasons.  It's not constantly looking for the positions as you scroll. So if you change something in the DOM you have to call ScrollTrigger.refresh() to update the values.

Hope this helps!

See the Pen zYRJzWg?editors=1010 by GreenSock (@GreenSock) on CodePen

  • Like 1
Link to comment
Share on other sites

Thank you @Cassie!
It works as expected.

Just to memo I have to set a timeout function and then call "ScrollTrigger.refresh"
 

      setTimeout(function () {
        ScrollTrigger.refresh()
      }, 300);


Otherwise it works only on the 2nd click...

  • Like 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.
×