Как позиция была изменена с динамически / программно фиксированной на веб-сайтах, таких как Netflix, w3schools и т. Д.? - PullRequest
Новая
       19

Как позиция была изменена с динамически / программно фиксированной на веб-сайтах, таких как Netflix, w3schools и т. Д.?

0 голосов
/ 15 сентября 2018

Я наблюдал на домашней странице Netflix - при прокрутке контейнера заголовка (см. Следующее изображение: домашняя страница netflix ) стиль автоматически изменится с относительной позиции на фиксированную, так что она всегда будет придерживаться сверху,Я вижу подобное поведение на многих сайтах: espncrinfo или https://www.w3schools.com/bootstrap/default.asp.Мне интересно знать, как эти сайты делают это - просто просмотр инструментов разработчика Chrome не дал мне много подробностей.

Вопрос:

это так просто, какпросто прослушивание события прокрутки (javascript) и обновление стиля, или это можно сделать с помощью , просто используя CSS без прослушивания событий прокрутки ?просто любопытно, так как я в порядке с основами CSS - но интересно, если я пропускаю какие-либо передовые методы, такие как преобразование или перевод здесь?

Перед прокруткой: html: 

<div class="pinning-header-container" style="top: 0px; position: relative; background: transparent;">
</div>

css: 

element.style {
  top: 0px;
  position: relative;
}

После прокрутки: 

element.style {
    top: 0px;
    position: fixed;
    background: rgb(20, 20, 20);
}

1 Ответ

0 голосов
/ 15 сентября 2018

это так же просто, как просто прослушать событие прокрутки (javascript) и обновить стиль

Традиционно это делалось так, и до недавнего времени другого пути не было.

можно ли это сделать, просто используя CSS без прослушивания событий прокрутки?

Да, в большинстве последних браузеров вы можете просто использовать position: sticky.Он имеет приличную поддержку браузера и есть polyfill .

...