Наверняка Вы уже знаете о таком значении свойства position в CSS, как sticky. Но как у начинающих, так и у продвинутых верстальщиков, оно вызывает массу вопросов. Одним из основных является то, как именно работает это и при каких условиях.
Для справки: position: sticky – это одно из новых значений свойства position, которое позволяет элементам прилипать к необходимой части экрана, во время прокрутки страницы. И не надо никакого JS... Данное значение свойства позволяет использовать удобные и простые навигационные и информационные элементы, не прибегая к использованию JS кода.
Как работает это значение, Вы наверняка знаете, но я все же напомню.
Есть родительский элемент <section> (к примеру). В нем есть заголовок <h2>, а также <article> с длинным текстом. И таких элементов <section> на странице несколько (может быть и один, несколько чисто для примера)...
Чтобы пользователь мог видеть заголовок <h2> при прокрутке странице, и не забывал о чем идет речь, при изучении длинного текста (возможно с видео/изображениями), логично представить, что расположив элемент <h2> вверху экрана, он как нельзя лучше даст понять о чем идет речь и позволит хоть немного улучшить UX страницы.
HTML код такой:
<section>
<h2>1 Lorem ipsum dolor sit amet.</h2>
<article>
<h3>Lorem ipsum dolor sit amet, consectetur adipisicing.</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi deserunt facilis incidunt labore maxime quia totam? Commodi deleniti et minima nostrum nulla numquam quaerat quod?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad aliquam aperiam assumenda consequatur dignissimos dolorem enim, excepturi fugiat inventore ipsam nemo nesciunt, nisi non provident quo saepe sapiente suscipit, vel voluptatum. Libero, pariatur sequi. Commodi debitis earum, expedita id libero magni neque nulla numquam pariatur quam quibusdam, repellat repellendus sunt ullam vero voluptas voluptatum?</p>
</article>
</section>
<section>
<h2>2 Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h2>
<article>
<h3>Lorem ipsum dolor sit.</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque esse eum illo molestias nam nobis non officia perspiciatis velit, voluptas.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic nisi quod quos sint veniam! Aspernatur assumenda aut autem, consectetur deserunt dicta eius fugiat itaque laboriosam molestias odio quas quidem quisquam, quos rem similique unde voluptatum?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita non perspiciatis voluptates? Incidunt, ratione, reprehenderit? At beatae ea esse ipsum iusto maxime officia repudiandae, temporibus? Consequuntur deserunt dicta, doloremque dolorum ea eveniet modi neque non, nulla officiis porro repellendus sit temporibus unde velit! Aliquam, perferendis?</p>
</article>
</section>
<section>
<h2>3 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error, illo.</h2>
<article>
<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam eligendi iste qui, quidem reiciendis sit!</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At corporis dicta ducimus expedita fugit, illum in ipsum laudantium, magnam minima molestias nam, natus nobis non nostrum pariatur praesentium provident quidem quo recusandae reiciendis repudiandae sequi tempore vero vitae? Expedita id ipsam minus sequi? Aperiam atque eaque error minus, tempora voluptas voluptates voluptatibus. Ab ad animi autem ipsam magnam nesciunt quia unde. Consequatur eos laborum pariatur unde veritatis! A debitis doloribus facilis natus nemo saepe veritatis.</p>
</article>
</section>CSS код:
body{min-height: 120vh}section{position:relative;padding:40px 10px;margin:5px 0;border:1px solid #999}h2{position:sticky;top:0;background:rgba(255,0,0,.5)}article{border:1px solid #ccc;padding:10px}header,footer{margin: 40px 0;background:#f5f5f5}footer{min-height:100vh}
Важно задать РОДИТЕЛЬСКОМУ элементу position: relative, дочернему элементу: position: sticky; top: 0 >> элемент прилипнет к верху страницы, если задать bottom: 0, то, соответственно, к низу.
САМОЕ ГЛАВНОЕ!
Для html, body НЕ ДОЛЖНО использоваться свойство overflow: hidden или overflow-x: hidden. Иначе, position: sticky НЕ сработает вообще.
ТАКЖЕ position: sticky не работает, если использовать новое свойство CSS — backdrop-filter. То есть, родительский контейнер НЕ должен иметь это свойство. Или же тот контейнер, на котором возникает полоса прокрутки.