Samuele Posted June 7, 2022 Share Posted June 7, 2022 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 More sharing options...
Solution Cassie Posted June 7, 2022 Solution Share Posted June 7, 2022 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 1 Link to comment Share on other sites More sharing options...
Samuele Posted June 7, 2022 Author Share Posted June 7, 2022 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... 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now