Olga__Kondr Posted November 22, 2020 Share Posted November 22, 2020 friends, sorry, I'm not confused much. I want the red block to be fixed to the end of the "filter__wrapper" block. Black squares are my projects, they will increase in volume. And the red block should always follow until the end of... What am I doing wrong? See the Pen jOryXay by Ollymolly (@Ollymolly) on CodePen Link to comment Share on other sites More sharing options...
akapowl Posted November 22, 2020 Share Posted November 22, 2020 Hey @Olga__Kondr The way you have it set up with your end being +=100% means, it will be pinned for 100% of the height of your .left-wrap__description, which in this case would be around the 100vh you have set as height for that element. To get it working as you'd like, you would have to get the height of your right-wrap for the end and substract the height of your left-wrap (plus any margins applied to the right-wrap). See this example: See the Pen 44a852ffe8f8167ceef22ce2684b38fd by akapowl (@akapowl) on CodePen I changed the CSS for your .left-wrap__description to this, so its bottom actually meets up with the bottom of the window when pinned .left-wrap__description { width: 150px; height: calc(100vh - 170px); padding: 35px; background-color: red; } And I changed the end of your ScrollTrigger to this end: () => '+=' + (document.querySelector('.right-wrap').offsetHeight - document.querySelector('.left-wrap__description').offsetHeight - 50) Now it gets the relevant heights neccessary in a function-based manner, so it also responds correctly on resizes. Hope this helps get a better understanding. Cheers, Paul 3 Link to comment Share on other sites More sharing options...
mikel Posted November 22, 2020 Share Posted November 22, 2020 Hey, Or you can define a suitable trigger for the end activity endTrigger: '.right-wrap', end: "bottom 100%", cheers ... Mikel 3 Link to comment Share on other sites More sharing options...
akapowl Posted November 22, 2020 Share Posted November 22, 2020 Yup, I tend to overcomplicate things 😅 @mikel's suggestion is definitely way easier than mine. See the Pen d76bab03a2b926023b61c8c3d2db18d8 by akapowl (@akapowl) on CodePen 3 Link to comment Share on other sites More sharing options...
Olga__Kondr Posted November 24, 2020 Author Share Posted November 24, 2020 @Микель @акапов Thank you very much, guys! I will try both 1 Link to comment Share on other sites More sharing options...
mikel Posted November 24, 2020 Share Posted November 24, 2020 Hey @Olga__Kondr, Interesting: my name in Cyrillic Happy tweening ... Микель Link to comment Share on other sites More sharing options...
Olga__Kondr Posted November 26, 2020 Author Share Posted November 26, 2020 @mikel Mikel = Микель или (or) Михаил (Michael) 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