Я пытаюсь создать базовый элемент булавки 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
Закрепление элемента при прокрутке вверх, но не при прокрутке вниз — GSAP ⇐ Jquery
-
- Похожие темы
- Ответы
- Просмотры
- Последнее сообщение
-
-
Закрепление элемента при прокрутке вверх, но не при прокрутке вниз — GSAP
Anonymous » » в форуме CSS - 0 Ответы
- 51 Просмотры
-
Последнее сообщение Anonymous
-
-
-
Липкая боковая панель: приклеивайте внизу при прокрутке вниз, сверху прокрутка вверх вверх
Anonymous » » в форуме Jquery - 0 Ответы
- 15 Просмотры
-
Последнее сообщение Anonymous
-
-
-
Липкая боковая панель: приклеивайте внизу при прокрутке вниз, сверху прокрутка вверх вверх
Anonymous » » в форуме Jquery - 0 Ответы
- 20 Просмотры
-
Последнее сообщение Anonymous
-