As stated in your previous topic with the same question pinSpacing: false, is what you could use. From the ScrollTrigger docs check for more info and check the video explaining it
Boolean | String - By default, padding will be added to the bottom (or right for horizontal: true) to push other elements down so that when the pinned element gets unpinned, the following content catches up perfectly. Otherwise, things may scroll UNDER the pinned element. You can tell ScrollTrigger not to add any padding by setting pinSpacing: false. If you'd rather it use margin instead of padding, you can set pinSpacing: "margin". Note: pinSpacing works in most cases, but it really depends on the way you set up your DOM and CSS. For example, if you pin something in a parent that has display: flex or position: absolute, the extra padding won't push other elements down/right so you may need to manually space things out. pinSpacing is just a convenience that works in most situations. Important: if the container is display: flex, pinSpacing is set to false by default because that's typically what is desired since padding works differently in that context.
Hope it helps and happy tweening!
https://codepen.io/mvaneijgen/pen/ZEmEMKG?editors=1010