Я пытаюсь создать базовый элемент булавки GSAP. Он закрепляется, но только когда я прокручиваю вверх. Я также хотел бы, чтобы он закреплялся при прокрутке компонента вниз.
Например, когда я добираюсь до компонента местоположения на странице, cta-контейнер остается закрепленным во время прокрутки. через компонент и заканчивается, когда я прокручиваю компонент. Как будто это должно отображаться поверх содержимого div .container при прокрутке.
Вот как я это сделал:
stickFloor: function () {
gsap.registerPlugin(ScrollTrigger);
const height = $(".location .container").outerHeight();
ScrollTrigger.create({
trigger: ".location__cta-container",
start: "top top",
end: "+=" + height,
pin: ".location__cta-container",
pinSpacing: false,
});
},
.location {
padding-bottom: 48px;
&__cta-container {
border-bottom: 2px solid gray;
box-shadow: 4px 4px 6px 0px rgba(0, 0, 0, 0.10);
background-color: white;
position: relative;
z-index: 1;
}
&__cta-mobile {
padding-top: 16px;
padding-bottom: 16px;
width: 90%;
text-align: center;
margin: 0 auto;
display: block;
margin-bottom: 24px;
position: relative;
z-index: 2;
}
}
Подробнее здесь: https://stackoverflow.com/questions/793 ... wards-gsap
