Как закреплять блоки, когда доскролили к ним?
поочередно
асайды (как один, так второй)
у блоков обводка красная
типа как стики
.block {
display: flex;
top: 0px;
}
.item--col {
width: 70%;
}
.item--aside {
width: 30%;
align-self: flex-start;
outline: 1px solid red;
}<h4>block 1</h4>
<div class="block">
<div class="item item--col">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi incidunt aliquam porro laboriosam neque laudantium, recusandae magni voluptatum, inventore cum, facere, repellendus. Recusandae dolore excepturi deserunt amet cum, cupiditate sequi! >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi incidunt aliquam porro laboriosam neque laudantium, recusandae magni voluptatum, inventore cum, facere, repellendus. Recusandae dolore excepturi deserunt amet cum, cupiditate sequi!>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi incidunt aliquam porro laboriosam neque laudantium, recusandae magni voluptatum, inventore cum, facere, repellendus. Recusandae dolore excepturi deserunt amet cum, cupiditate sequi!>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi incidunt aliquam porro laboriosam neque laudantium, recusandae magni voluptatum, inventore cum, facere, repellendus. Recusandae dolore excepturi deserunt amet cum, cupiditate sequi!>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi incidunt aliquam porro laboriosam neque laudantium, recusandae magni voluptatum, inventore cum, facere, repellendus. Recusandae dolore excepturi deserunt amet cum, cupiditate sequi!>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi incidunt aliquam porro laboriosam neque laudantium, recusandae magni voluptatum, inventore cum, facere, repellendus. Recusandae dolore excepturi deserunt amet cum, cupiditate sequi!>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi incidunt aliquam porro laboriosam neque laudantium, recusandae magni voluptatum, inventore cum, facere, repellendus. Recusandae dolore excepturi deserunt amet cum, cupiditate sequi!</div>
<div class="item item--aside">aside закрепляющий один</div>
</div>
<h4>block 2</h4>
<div class="block">
<div class="item item--col">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi incidunt aliquam porro laboriosam neque laudantium, recusandae magni voluptatum, inventore cum, facere, repellendus. Recusandae dolore excepturi deserunt amet cum, cupiditate sequi!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi incidunt aliquam porro laboriosam neque laudantium, recusandae magni voluptatum, inventore cum, facere, repellendus. Recusandae dolore excepturi deserunt amet cum, cupiditate sequi!</div>
<div class="item item--aside">aside закрепляющий второй</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi incidunt aliquam porro laboriosam neque laudantium, recusandae magni voluptatum, inventore cum, facere, repellendus. Recusandae dolore excepturi deserunt amet cum, cupiditate sequi!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi incidunt aliquam porro laboriosam neque laudantium, recusandae magni voluptatum, inventore cum, facere, repellendus. Recusandae dolore excepturi deserunt amet cum, cupiditate sequi!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi incidunt aliquam porro laboriosam neque laudantium, recusandae magni voluptatum, inventore cum, facere, repellendus. Recusandae dolore excepturi deserunt amet cum, cupiditate sequi!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi incidunt aliquam porro laboriosam neque laudantium, recusandae magni voluptatum, inventore cum, facere, repellendus. Recusandae dolore excepturi deserunt amet cum, cupiditate sequi!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi incidunt aliquam porro laboriosam neque laudantium, recusandae magni voluptatum, inventore cum, facere, repellendus. Recusandae dolore excepturi deserunt amet cum, cupiditate sequi!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi incidunt aliquam porro laboriosam neque laudantium, recusandae magni voluptatum, inventore cum, facere, repellendus. Recusandae dolore excepturi deserunt amet cum, cupiditate sequi!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi incidunt aliquam porro laboriosam neque laudantium, recusandae magni voluptatum, inventore cum, facere, repellendus. Recusandae dolore excepturi deserunt amet cum, cupiditate sequi!</p>Ответы (1 шт):
Автор решения: temarazin
→ Ссылка
Нужно указать position: sticky; и положение, где элемент закрепляется, например, top: 10px;
.block {
display: flex;
top: 0px;
}
.item--col {
width: 70%;
}
.item--aside {
width: 30%;
align-self: flex-start;
outline: 1px solid red;
position: sticky;
top: 10px;
}<h4>block 1</h4>
<div class="block">
<div class="item item--col">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi incidunt aliquam porro laboriosam neque laudantium, recusandae magni voluptatum, inventore cum, facere, repellendus. Recusandae dolore excepturi deserunt amet cum, cupiditate sequi! >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi incidunt aliquam porro laboriosam neque laudantium, recusandae magni voluptatum, inventore cum, facere, repellendus. Recusandae dolore excepturi deserunt amet cum, cupiditate sequi!>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi incidunt aliquam porro laboriosam neque laudantium, recusandae magni voluptatum, inventore cum, facere, repellendus. Recusandae dolore excepturi deserunt amet cum, cupiditate sequi!>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi incidunt aliquam porro laboriosam neque laudantium, recusandae magni voluptatum, inventore cum, facere, repellendus. Recusandae dolore excepturi deserunt amet cum, cupiditate sequi!>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi incidunt aliquam porro laboriosam neque laudantium, recusandae magni voluptatum, inventore cum, facere, repellendus. Recusandae dolore excepturi deserunt amet cum, cupiditate sequi!>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi incidunt aliquam porro laboriosam neque laudantium, recusandae magni voluptatum, inventore cum, facere, repellendus. Recusandae dolore excepturi deserunt amet cum, cupiditate sequi!>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi incidunt aliquam porro laboriosam neque laudantium, recusandae magni voluptatum, inventore cum, facere, repellendus. Recusandae dolore excepturi deserunt amet cum, cupiditate sequi!</div>
<div class="item item--aside">aside закрепляющий один</div>
</div>
<h4>block 2</h4>
<div class="block">
<div class="item item--col">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi incidunt aliquam porro laboriosam neque laudantium, recusandae magni voluptatum, inventore cum, facere, repellendus. Recusandae dolore excepturi deserunt amet cum, cupiditate sequi!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi incidunt aliquam porro laboriosam neque laudantium, recusandae magni voluptatum, inventore cum, facere, repellendus. Recusandae dolore excepturi deserunt amet cum, cupiditate sequi!</div>
<div class="item item--aside">aside закрепляющий второй</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi incidunt aliquam porro laboriosam neque laudantium, recusandae magni voluptatum, inventore cum, facere, repellendus. Recusandae dolore excepturi deserunt amet cum, cupiditate sequi!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi incidunt aliquam porro laboriosam neque laudantium, recusandae magni voluptatum, inventore cum, facere, repellendus. Recusandae dolore excepturi deserunt amet cum, cupiditate sequi!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi incidunt aliquam porro laboriosam neque laudantium, recusandae magni voluptatum, inventore cum, facere, repellendus. Recusandae dolore excepturi deserunt amet cum, cupiditate sequi!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi incidunt aliquam porro laboriosam neque laudantium, recusandae magni voluptatum, inventore cum, facere, repellendus. Recusandae dolore excepturi deserunt amet cum, cupiditate sequi!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi incidunt aliquam porro laboriosam neque laudantium, recusandae magni voluptatum, inventore cum, facere, repellendus. Recusandae dolore excepturi deserunt amet cum, cupiditate sequi!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi incidunt aliquam porro laboriosam neque laudantium, recusandae magni voluptatum, inventore cum, facere, repellendus. Recusandae dolore excepturi deserunt amet cum, cupiditate sequi!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi incidunt aliquam porro laboriosam neque laudantium, recusandae magni voluptatum, inventore cum, facere, repellendus. Recusandae dolore excepturi deserunt amet cum, cupiditate sequi!</p>