Мне нужно создать форму, которая остается закрепленной при прокрутке нового элемента полной ширины.
На этом сайте вы можете увидеть его в действии: https://www.pillpack.com/how-it-works, но после проверки элементы, я до сих пор не вижу, как они достигают этого эффекта.
Вот как выглядит мой макет:
Красный прямоугольник прикреплен и при прокрутке он будет прилипать к верхней части области просмотра. Проблема, с которой я здесь сталкиваюсь, заключается в том, что мне нужно, чтобы красный прямоугольник оставался липким даже при достижении зеленой части.
Способ, которым я в настоящее время достигаю этого эффекта, состоит в основном из 2 столбцов в родительском контейнере. Родительский контейнер сгибает свои дочерние элементы, а красный прямоугольник имеет фиксированную позицию. Но теперь у меня есть элемент полной ширины, на котором мой красный прямоугольник все еще должен оставаться липким.
Хотелось бы немного разобраться в этом.
РЕДАКТИРОВАТЬ:
некоторые основы c psuedo-esque code for you ...
HTML
section.wrapper
div.container
div.left
form
section.wrapper.green-bg
div.container
div.left
CSS
.wrapper {
position: relative;
width: 100%;
}
.container {
max-width: 1100px;
width: 90%;
margin: 0 auto;
display: flex;
flex-flow: row nowrap;
align-items: flex-start;
}
.form {
position: sticky;
top: 0;
}
Надеюсь, вы, ребята, сможете понять проблему здесь. sections - элементы полной ширины. Внутри sections есть div.container, который имеет максимальную ширину и центрирован. Внутри container находится содержимое.
В первом разделе не должно быть фона, а во втором - зеленый фон. Поскольку фон имеет полную ширину, это необходимо сделать для элемента section. Это вызывает проблемы, потому что для того, чтобы красный прямоугольник был прикреплен, все элементы должны быть внутри родительского контейнера.