Появление элемента при прокрутке: Как сделать плавное появление блока при прокрутке вниз (например, 300px)? — Хабр Q&A

Приемы оформления с применением эффектов прокрутки в Adobe Muse

Этот эффект основан на влете отдельных элементов на страницу для образования единого объекта по мере прокрутки страницы посетителем. Поведение графических элементов и текстовых фреймов управляется с помощью эффектов прокрутки, что позволяет добиться эффекта интерактивного собирания фрагментов в единое целое. Это увлекательный способ продемонстрировать подробности о продукте на веб-странице.

В процессе работы над созданием этого эффекта используется раздел «Начальное перемещение» вкладки «Перемещение» на панели «Эффекты прокрутки», настройки в котором позволяют объединить элементы в единый компонент дизайна. После перемещения каждого фрагмента на свое место для настроек в разделе «Конечное перемещение» задаются значения «0», чтобы существующие элементы оставались на местах по мере появления новых фрагментов.

Чтобы создать подобный эффект появления по частям, выполните указанные ниже действия.

1. В представлении «Дизайн» выберите «Страница» > «Свойства страницы». В поле «Мин. Высота» задайте довольно высокое значение. В этом примере минимальная высота страницы составляет 14,120 пикселей.
2. С помощью инструмента «Текст» создайте текстовый фрейм и введите свой текст.
3. На панели «Эффекты прокрутки» перейдите на вкладку «Перемещение» и установите флажок «Перемещение». В этом примере значения настроек в разделе «Начальное перемещение» заданы таким образом, что текстовый фрейм перемещается вниз со скоростью 0,25 (1/4) скорости прокрутки страницы. По достижении исходной позиции текстового фрейма он размещается в положении, которое задано для него в представлении «Дизайн». Затем, в соответствии с настройками в разделе «Конечное перемещение» (для перемещения в обоих направлениях задано значение «0»), первый элемент остается на месте, как если бы его закрепили.
4. Файл PNG с прозрачностью (очертания корпуса телефона) размещается под текстовым фреймом. Этот элемент использует настройки на вкладке «Перемещение» панели «Эффекты прокрутки», которые заданы таким образом, что элемент влетает на страницу слева и остается в заданном положении.
5. Почти одновременно с очертаниями корпуса телефона на страницу слева влетает небольшой элемент белого цвета (по аналогичной траектории) и также фиксируется в заданном для него положении. Этот элемент белого цвета обозначает динамик, расположенный в верхней части телефона. Данный ресурс (phone-earpiece.png) размещается над слоем очертаний корпуса телефона на панели «Слои», поэтому на странице он отображается поверх телефона. 
6. В нижней части корпуса телефона напротив динамика размещается небольшой белый элемент, обозначающий кнопку «Домой». Он так же, как и элемент динамика, влетает слева (по аналогичной траектории) и так же размещается поверх очертаний корпуса телефона.
7. Затем слева влетает прямоугольник с едва заметной градиентной заливкой (от белого до светло-серого). Он использует настройки на вкладке «Перемещение» панели «Эффекты прокрутки» для перемещения в указанное положение и точно соответствует размерам прозрачной области в центре очертаний корпуса телефона. Оставаясь в этом положении, данный элемент имитирует экран телефона. Слой элемента экрана телефона (phone-screen.png) находится в самом низу на панели «Слои», поэтому он всегда отображается на странице на заднем фоне (за всеми другими элементами телефона).
8. Затем на заданные места перемещаются четыре прямоугольника разных размеров и со сплошной заливкой разными цветами (голубым, зеленым, желтым и красным). Для создания эффекта влета фрагментов с разных направлений для каждого из прямоугольников на вкладке «Перемещение» панели «Эффекты прокрутки» заданы различные параметры направлений и скорости перемещения. Синий прямоугольник перемещается вниз и влево, зеленый и желтый прямоугольники перемещаются вверх и вправо, а красный прямоугольник — вверх и влево в соответствии с настройками в разделе «Начальное перемещение». В разделе «Конечное перемещение» для всех прямоугольников заданы значения «0» для обоих направлений перемещения. Это позволяет добиться того, что после размещения каждого прямоугольника в нужном положении они остаются закрепленными поверх экрана телефона.
9. После появления всех остальных фрагментов появляется второй текстовый фрейм, который перемещается снизу вверх и размещается под первым текстовым фреймом. Он перемещается со скоростью 0,5 (половина) скорости прокрутки страницы.

Наконец, по мере прокрутки появляются еще два элемента: прямоугольник со сплошной заливкой цветом, который используется для заливки страницы (на странице он остается невидимым) и группа объектов (прямоугольник желтого цвета и изображение лампочки), расположенная за прямоугольником.

Прямоугольник со сплошной заливкой цветом служит для скрытия расположенной за ним группы.

Анимации при прокрутке и при наведении

В редакторе Creatium доступно более 60 различных анимаций. Все они делятся на два типа:

АНИМАЦИЯ ПРИ ПРОКРУТКЕ

Особенности данного типа анимаций:

• Срабатывают только один раз, в тот момент, когда секция или виджет расположены в зоне видимости окна браузера.

Чтобы включить анимацию для секции — нужно открыть настройки стилей у секции, а затем перейти в раздел «Эффекты».

• В момент выбора анимации она автоматически воспроизведется в редакторе;

• Повторить анимацию можно нажатием на кнопку ”Воспроизвести”;

• Параметр ”Задержка выполнения анимации” позволяет задать промежуток времени между отсутствием анимации и началом её воспроизведения. 

Вот так работает анимаций с одинаковой задержкой воспроизведения:

А вот так, когда для разных секций установлено разное время задержки перед началом воспроизведения:

Чтобы включить анимацию для виджета — нужно открыть настройки стилей у виджета (кнопка в форме капельки) и перейти в раздел ”Эффекты”.

Добавим эффект анимации при прокрутке для виджетов в секции с описанием товара.

Заметка: на видео включается анимация для родительского виджета, то есть для того, в котором сосредоточены все остальные виджеты. Когда нужно анимировать целую группу виджетов одновременно — на много проще поместить их в виджет ”Блок”, а затем включить анимацию только для него. В следующий раз, когда нужно будет изменить анимацию на другую, менять её придется только у родительского виджета, а не у всей группы виджетов.

Почему в момент прокрутки круговой эффект воспроизведения анимаций не сработал, а после обновления страницы сработал?

При прокрутке сначала будет воспроизводиться анимация для тех виджетов, которые первыми находятся в зоне видимости пользователя. А при обновлении страницы, все виджеты уже находятся в зоне видимости, по этому эффект кругового воспроизведения анимаций сработал.

Настраивать круговую анимацию, как правило имеет смысл в тех случаях, когда вы делитесь или рекламируете страницу указывая на неё быстрые ссылки.

АНИМАЦИЯ ПРИ НАВЕДЕНИИ

Отличия этого типа анимаций от предыдущего:
— Не воспроизводится автоматически в момент прокрутки страницы;
— Воспроизводится каждый раз, когда над виджетом проходит курсор мыши.

Чтобы включить анимацию для виджета — нужно открыть настройки стилей у виджета (кнопка в форме капельки) и перейти в раздел ”Эффекты”.

Чтобы включить анимацию для виджета «Кнопка» — нужно открыть настройки кнопки в гаечном ключе и перейти в раздел ”Вид” — «Эффекты».

В секции с описанием есть одно фото, но при наведении и клике на него ничего не происходит. Сделаем так, чтобы при клике по фоно открывалась форма, а при наведении воспроизводилась анимация.

Для этого понадобится вместо виджета ”Картинка” добавить виджет ”Кнопка-картинка”, настроить в кнопке действия для открытия окна с формой и включить подходящую анимацию.

ОТКЛЮЧЕНИЕ АНИМАЦИЙ НА СТРАНИЦЕ

Отключение анимаций происходит точно так же, как и включение.

Анимация секций:

• Эффект появления при прокрутке — разрешает анимациям секций выполняться при прокрутке;

• Слайдер секции — включает особый тип перехода между секциями. Подробнее о его настройке написано в этой инструкции;

• Отключить — запрещает анимациям секций выполняться при прокрутке.

Анимация виджетов:

• Эффект появления при прокрутке — разрешает воспроизведение анимаций виджетов при прокрутке;

• Отключить — запрещается воспроизведение анимаций виджетов при прокрутке.

РЕКОМЕНДАЦИИ ПО РАБОТЕ С АНИМАЦИЯМИ

Анимация сама по себе является ресурсоёмким процессом, то есть она заставляет процессор вашего компьютера или смартфона рассчитывать динамическую траекторию движения элементов на экране все то время, пока анимация выполняется. К счастью на современных компьютерах и смартфонах вы вряд ли заметите какие-либо замедления в работе браузера или других программ в то время, как выполняется анимация, но так как не у всех посетителей вашей страницы будут современные и мощные устройства, будет лучше включить анимацию как можно для меньшего количества виджетов и секций.

Пример страницы с настроенными анимациями в редакторе и на опубликованном варианте.

ДОПОЛНИТЕЛЬНЫЕ МАТЕРИАЛЫ

Уменьшающаяся при прокрутке «шапка» страницы без JavaScript

Представьте себе красивую и массивную «шапку» (header) веб-страницы с множеством отступов сверху и снизу от содержимого. Когда страница прокручивается (скроллится) вниз, «шапка» сжимается, уменьшая отступы и содержимое, чтобы оставить больше места на экране для остального контента.

Обычно, чтобы добавить такой эффект уменьшения шапки при скролле страницы, используется немного JavaScript и CSS, но с появлением position: sticky то же самое можно сделать, используя только CSS.

Начинаем, как обычно, с HTML-разметки. Здесь нет ничего сложного: <header> с одним потомком <div>, который, содержит логотип и навигацию.

<header>
  <div>
    <div>...</div>
    <nav>...</nav>
  </div>
</header> 

Затем в CSS, объявим высоту для <header> (120 пикселей) и настроим его как flex-контейнер, который выравнивает содержимое по центру. Затем сделаем его «липким» (sticky).

.header-outer {
  display: flex;
  align-items: center;
  position: sticky;
  height: 120px;
}

Все остальные элементы «шапки»: логотип и навигация — размещаются во внутреннем контейнере. В некотором смысле этот контейнер и является «шапкой», тогда как единственная функция родительского HTML-элемента <header> — обозначить её размеры, чтобы было что сокращать.

Настроим внутренний контейнер, указываем для

.header-inner {
  height: 70px;
  position: sticky;
  top: 0; 
}

Для чего top: 0;? Это нужно для того, чтобы контейнер, когда он становится «липким» (sticky), крепился к самому верху окна.

А теперь хитрость! Чтобы внутренний контейнер прилипал к верхнему краю страницы, нужно указать родительскому элементу <header> отрицательное значение top, равное разнице высот между двумя контейнерами, чтобы он прилипал чуть выше окна. Это 70 пикселей минус 120 пикселей, так и напишем -50 пикселей.

.header-outer {
  display: flex;
  align-items: center;
  position: sticky;
  height: 120px;
  /* top равно разнице высот
  между внешним и внутренним
  контейнерами */
  top: -50px;
}

Собираем теперь это всё воедино. <header> выдвигается за пределы экрана, а внутренний контейнер аккуратно помещается в верхней части области просмотра.

See this code Shrinking header on scroll without Javascript on x. xhtml.ru.

Таким образом можно приклеить к верхней части окна любой элемент. Например, важное объявление.

See this code Sticky banner on x.xhtml.ru.

При всём великолепии этого метода приклеивания элементов к верху окна при скролле с помощью только CSS, у него есть ограничения. Например, для внутреннего и внешнего контейнера нужно указать фиксированную высоту. При этом, они становятся уязвимыми для изменений, например, когда элементы навигации переносятся, потому что количество пунктов меню превышает количество отведенного для них места.

Еще одно ограничение? Не уменьшается логотип. Это, пожалуй, самый большой недостаток, поскольку логотипы часто являются самым большим потребителем свободного места. Наверное, когда-нибудь получится применять стили, основанные на липкости элемента…

How to Create a Shrinking Header on Scroll Without JavaScript.

Поддержка CSS

position: sticky

Вопрос: Как сделать появление/исчезновение div элемента при прокрутке страницы?

Lukas Basaria

событие onscroll. Максим6

Другие интересные вопросы и ответы

Как вернуть старый дизайн страницы вопроса на TheQuestion?

На постоянной основе — никак.

Один из вариантов — написать пользовательские стили. Даже не обязательно делать как старый дизайн, можно сделать всё гораздо приятнее и под себя. (На самом деле это был такой хитрый план — сделать новый дизайн, чтобы пользователи научились писать кастомные css стили. TheQuestion — первый образовательный).

Ну а для самых экстремалов: если открывать страницу вопроса по ссылке https://thequestion.ru/question/329319/kak-vernut-staryi-dizain-stranicy-voprosa-na-thequestion (то есть /question/ а не /questions/ и обязательно со слагом), то будет открываться старая версия страницы. Правда ссылка автоматически заменяется обратно на /questions/, поэтому вручную менять каждый раз будет, наверное, трудно. Да и объективно, мобильная версия стала выглядеть лучше и функциональнее, так что упарываться можно только на десктопе.

И не факт что на ней всё будет корреткно работать в дальнейшем. И вообще возможно в какой-то момент появится полный редирект :>

Почему у некоторых обычных людей на личных страницах вместо кнопки «добавить в друзья» стоит «подписаться»?

День добрый, уважаемый аноним)
Ой, Вы знаете, у меня на странице вот так, как Вы спросили. Вот есть там в настройках приватности пункт о тех, кто может приглашать в друзья, там и устанавливает каждый обычный человек те критерии, которые ему важны. Делает он это исключительно из своих принципов и побуждений. Может открытости не нужно ему, может не хочет расширять круг своего общения.
А суть то от различных определений этого факта не меняется! Добавишь ли ты в друзья или подпишишься, всё равно ты станешь подписчиком этого человека. Однофигственно он потом сам решит : взаимно добавлять или оставлять в подписчиках. Разницы нет, товарищи. Просто формулировка разная…
Если всё же этот вопрос был с подтекстом и немного относился непосредственно ко мне и почему я так сделала, то всё до банальности просто. Поскольку я страшный социофоб, то новых и незнакомых людей безумно боюсь. Я же параноик.
Оглядываясь по сторонам, всегда с вами D.O.TaliNa La Tristesse58

Как сделать скрытый текст в html на сайте?

Как сделать скрытый текст в html?

Часто встречаю на сайтах и форумах «скрытый текст«. И то, что скрыто под этим текстом станет доступно для чтения после регистрации на этом сайте или форуме. А как самому можно сделать этот скрытый текст, если сайт сделан на языке html?

В css элементе блока с текстом:

div {

display:none;

}

Если надо показать, то пишем например:

div {

display:block;

}

Думаю смысл понятен, скрыть или показать элемент.

Вот с кнопкой

Или в jQuery используйте команды .toggle() или .show() и .hide()

Это скрыть, а полностью из кода только через php или другое.

Как сделать появление/исчезновение div элемента при прокрутке страницы?

Событие onscroll.

Пропали полосы прокрутки в Excel, как их можно вернуть?

«Файл» — «Параметры» — «Дополнительно» — «Параметры отображения книги» — поставить обе галочки для полос прокрутки

Чтобы вернуть полосы прокрутки в книге Excel, проделайте следующие шаги:найдите и откройте вкладку Файл в панели инструментов;выберите пункт Параметры и нажмите на категорию Дополнительно;для отображения полос прокрутки в пункте «Показать параметры для следующей книги» поставьте галку в поле «Показывать горизонтальную полосу прокрутки» и «Показывать вертикальную полосу прокрутки».Никита К.5

Element.scrollIntoView () — веб-API | MDN

  element. scrollIntoView ();
element.scrollIntoView (alignToTop);
element.scrollIntoView (scrollIntoViewOptions);
  

Параметры

alignToTop Дополнительно

— это логическое значение :

• Если истинно , верх элемента будет выровнен по верху видимая область прокручиваемого предка.Соответствует scrollIntoViewOptions: {блок: "начало", встроенный: "ближайший"} . Это значение по умолчанию.
• Если false , нижняя часть элемента будет выровнена по низу видимой области прокручиваемого предка. Соответствует scrollIntoViewOptions: {блок: "конец", встроенный: "ближайший"} .

scrollIntoViewOptions Дополнительно

— это объект со следующими свойствами:

поведение Дополнительно

Определяет анимацию перехода.
Один из авто или гладкий . По умолчанию авто .

блок Дополнительно

Определяет вертикальное выравнивание.
Один из начало , центр , конец или ближайший . По умолчанию начало .

рядный Дополнительно

Определяет горизонтальное выравнивание.
Один из начало , центр , конец или ближайший .По умолчанию , ближайшее к .

  var element = document.getElementById ("коробка");

element.scrollIntoView ();
element.scrollIntoView (ложь);
element.scrollIntoView ({блок: "конец"});
element.scrollIntoView ({поведение: «гладкий», блок: «конец», встроенный: «ближайший»});
  

Элемент нельзя прокрутить полностью вверх или вниз в зависимости от макета других элементов.

Таблицы BCD загружаются только в браузере.

.scrollHeight — Веб-API | MDN

Свойство Element.scrollHeight только для чтения является измерение высоты содержимого элемента, включая содержимое, не видимое на экран из-за переполнения.

scrollHeight Значение равно минимальной высоте элемента. требуется, чтобы уместить весь контент в области просмотра без использования вертикального полоса прокрутки. Высота измеряется так же, как clientHeight : она включает отступ элемента, но не его границу, поля или горизонтальная полоса прокрутки (если есть).Он также может включать высоту псевдоэлементов например :: до или :: после . Если содержимое элемента может подходит без вертикальной полосы прокрутки, его scrollHeight равно клиент Высота

  elemScrollHeight = element.scrollHeight;  

Значение

Целое число, соответствующее значению пикселя scrollHeight элемента.

обивка

Lorem ipsum dolor sit amet, consctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud осуществление ullamco labouris nisi ut aliquip ex ea Commodo Concequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat Cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est Laborum.

набивка-дно

Определите, есть ли у элемента была полностью прокручена

Следующая эквивалентность возвращает истинное значение , если элемент находится в конце своего scroll, false , если это не так.

  element.scrollHeight - Math.abs (element.scrollTop) === element.clientHeight
  

Когда контейнер не прокручивается, но имеет переполненные дочерние элементы, эти проверки определить, может ли контейнер прокручиваться:

  window.getComputedStyle (элемент) .overflowY === 'видимый'
window.getComputedStyle (элемент) .overflowY! == 'скрытый'
  

Связанный с событием onscroll , этот эквивалентность может быть полезна для определения, прочитал ли пользователь текст или нет (см. также элемент .scrollTop и element.clientHeight характеристики).

Флажок в демонстрации ниже отключен, поэтому его нельзя установить, чтобы показать согласие пока содержимое текстового поля не будет прокручено.

HTML

  

  

     Lorem ipsum dolor sit amet, conctetur adipiscing elit. Vestibulum at laoreet magna.
Aliquam erat volutpat.<img class="lazy lazy-hidden" src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/images.myshared.ru/83/1383012/slide_31.jpg' /><noscript><img src='/800/600/http/images.myshared.ru/83/1383012/slide_31.jpg' /></noscript>  Praesent molestie, dolor ut eleifend aliquam, mi ligula ultrices sapien, quis cursus
neque dui nec risus.Duis tincidunt lobortis purus eu aliquet. Quisque in dignissim magna. Aenean ac lorem at
velit ultrices conquat. Nulla luctus nisi ut libero cursus ultrices. Pellentesque nec dignissim enim. Phasellus
ut quam lacus, sed ultricies diam. Vestibulum convallis rutrum dolor, sit amet egestas velit scelerisque id.
Proin non dignissim nisl. Sed mi odio, ullamcorper eget mattis id, malesuada vitae libero. Целое число dolor lorem,
mattis sed dapibus a, faucibus id metus. Duis iaculis dictum pulvinar. In nisi nibh, dapibus ac blandit at, porta
at arcu.Pellentesque обитатель morbi tristique senectus et netus et malesuada fames ac turpis egestas. Присент
dictum ipsum aliquet erat eleifend sit amet sollicitudin felis tempus. Aliquam congue cursus venenatis. Меценат
luctus pellentesque placerat. Mauris nisl odio, condimentum sed fringilla a, consctetur id ligula. Praesent sem
sem, aliquet non faucibus vitae, iaculis nec elit.<img class="lazy lazy-hidden" src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/sbfactory.ru/cd/wp-content/uploads/2019/01/2019-01-20_11-57-28.png' /><noscript><img src='/800/600/https/sbfactory.ru/cd/wp-content/uploads/2019/01/2019-01-20_11-57-28.png' /></noscript>  Nullam volutpat, lectus et blandit bibendum, nulla lorem congue
turpis, ac Pretium Tortor sem ut nibh. Donec vel mi in ligula hendrerit sagittis.Donec faucibus viverra fermentum.
Fusce in arcu arcu. Nullam at dignissim massa. Cras nibh est, pretium sit amet faucibus eget, sollicitudin in
язычок. Vivamus vitae urna mauris, eget euismod nunc. Aenean semper gravida enim non feugiat. В хаc хабитассе
Platea dictumst. Cras eleifend nisl volutpat ante condimentum convallis. Donec varius dolor malesuada erat
конскват конгл. Donec eu lacus ut sapien venenatis tincidunt. Quisque sit amet tellus et enim bibendum varius et
орки. Donec aliquet volutpat scelerisque.Proin et toror dolor. Ut aliquet, dolor a mattis sodales, odio diam
pulvinar sem, egestas pretium magna eros vitae felis. Nam vitae magna lectus, et ornare elit. Морби феугиат, ipsum
ac mattis congue, quam neque mollis toror, nec mollis nisl dolor a toror. Maecenas varius est sit amet elit
interdum quis placerat metus posuere. Duis malesuada justo a diam vestibulum vel aliquam nisi ornare. Целое число
laoreet nisi a odio ornare non congue turpis eleifend. Cum sociis natoque penatibus et magnis disparturient montes,
nascetur ridiculus mus.Cras vulputate libero sed arcu iaculis nec lobortis orci fermentum.
    
  
  

    
     Согласен 
    
  
  

CSS

  #notice {
  дисплей: встроенный блок;
  нижнее поле: 12 пикселей;
  радиус границы: 5 пикселей;
  ширина: 600 пикселей;
  отступ: 5 пикселей;
  граница: 2px # 7FDF55 solid;
}

#правила {
  ширина: 600 пикселей;
  высота: 130 пикселей;
  отступ: 5 пикселей;
  граница: # 2A9F00 solid 2px;
  радиус границы: 5 пикселей;
}  

JavaScript

  function checkReading () {
  если (checkReading.читать) {
    возвращаться;
  }
  checkReading.read = this.scrollHeight - Math.round (this.scrollTop) === this.clientHeight;
  document.registration.accept.disabled = document.getElementById ("nextstep"). disabled =! checkReading.read;
  checkReading.noticeBox.textContent = checkReading.read? "Спасибо." : «Прокрутите, пожалуйста, и прочтите следующий текст.»;
}

onload = function () {
  var oToBeRead = document.getElementById («правила»);
  checkReading.noticeBox = document.createElement ("диапазон");
  документ. регистрация.accept.checked = false;
  checkReading.noticeBox.id = "уведомление";
  oToBeRead.parentNode.insertBefore (checkReading.noticeBox, oToBeRead);
  oToBeRead.parentNode.insertBefore (document.createElement ("br"), oToBeRead);
  oToBeRead.onscroll = checkReading;
  checkReading.call (oToBeRead);
}  

Таблицы BCD загружаются только в браузере

Стиль на основе положения прокрутки

Рик Шеннинк документирует систему, позволяющую писать селекторы CSS, которые определяют стиль страницы, когда она прокручивается до определенной точки.Если вы похожи на меня, вы уже ищете document.addEventListener ('scroll' ... и боитесь производительности. Рик сразу доходит до этого, отклоняя функцию и отмечая событие как пассивный .

Конечным результатом является атрибут data-scroll в элементе , который можно использовать в CSS. Это означает, что если вы прокрутите страницу вниз до 640 пикселей, у вас будет и вы можете написать селектор, например:

  html: not ([data-scroll = '0']) {
  padding-top: 3em;
}
html: not ([data-scroll = '0']) header {
  положение: фиксированное;
}  

См. Pen
Writing Dumb JS 🧟‍♂️ и Smart CSS 👩‍🔬 от Рика Шеннинка (@rikschennink)
на CodePen.

К сожалению, у нас нет селекторов больше (> ) меньше ( <) в CSS для таких вещей, как нумерованные атрибуты, поэтому возможности стилизации CSS здесь довольно ограничены. В конечном итоге вам может потребоваться обновить функцию JavaScript, чтобы она применяла другие классы или атрибуты данных на основе ваших математических расчетов. Но здесь вы уже настроены на хорошую работу.

«Применять стили, когда пользователь прокручивает сверху вниз» - допустимый вариант использования.Это заставляет меня думать о функции Once (например, в jQuery), где любое событие прокрутки будет запускаться только один раз, а затем не запускается снова. Они прокручиваются! Так что по определению они больше не на вершине! Но этого не происходит, когда они прокручивают назад, вверх.

Я считаю более полезным использовать IntersectionObserver для стилизации вещей на основе положения прокрутки. С его помощью вы можете делать такие вещи, как «был ли этот элемент прокручен в поле зрения или за его пределы», что в общем полезно и может также использоваться для прокрутки сверху.

Вот пример, который добавляет или удаляет класс, если пользователь прокручивает скрытый пиксель, расположенный на 500 пикселей вниз по странице.

См. «Фиксированный заголовок Pen
с IntersectionObserver» Криса Койера (@chriscoyier)
на CodePen.

Это тоже высокая производительность, что позволяет вообще избежать каких-либо обработчиков событий прокрутки.

И, говоря о IntersectionObserver , проверьте «Доверие - это хорошо, наблюдение - лучше - Intersection Observer v2».

Применение стилей на основе положения прокрутки пользователя с помощью Smart CSS • PQINA

Сопоставляя текущее смещение прокрутки с атрибутом в элементе html , мы можем стилизовать элементы на странице на основе текущей позиции прокрутки.Мы можем использовать это, например, для создания плавающего навигационного компонента.

Это HTML-код, с которым мы будем работать, хороший компонент

  
 Я верхний колонтитул страницы 
 Здесь много контента ... 
 Более красивый контент ... 
 Содержание ... 
  

  document.addEventListener ("scroll", () => {
  document.documentElement.dataset.scroll = window.scrollY;
});  

 
header {
  мин-высота: 3em;
  ширина: 100%;
  цвет фона: #fff;
}


html: not ([data-scroll = "0"]) body {
  padding-top: 3em;
}


html: not ([data-scroll = "0"]) header {
  положение: фиксированное;
  верх: 0;
  z-индекс: 1;

  
  тень коробки: 0 0 0.5em rgba (0, 0, 0, 0,5);
}  

 

const storeScroll = () => {
  document.documentElement.dataset.scroll = window.scrollY;
};


document.addEventListener («прокрутка», storeScroll);


storeScroll ();  

 
const debounce = (fn) => {
  
  пусть рамка;

  
  возвращаться (...params) => {
    
    if (frame) {
      cancelAnimationFrame (кадр);
    }

    
    frame = requestAnimationFrame (() => {
      
      fn (... параметры);
    });
  };
};



const storeScroll = () => {
  document.documentElement.dataset.scroll = window.scrollY;
};


document.addEventListener («прокрутка», debounce (storeScroll));


storeScroll ();  

  document.addEventListener («прокрутка», debounce (storeScroll), {пассив: истина});  

  
 
 ... 
 
  

 .контейнер {
 курсор: захватить; 
 переполнение: авто; 
}  

  const ele = document.getElementById ('container'); 
 ele.scrollTop = 100; 
 ele.scrollLeft = 150;  

  let pos = {top: 0, left: 0, x: 0, y : 0}; 
 const mouseDownHandler = function (e) {
 pos = {
 left: ele.scrollLeft, 
 top: ele.scrollTop, 
 x: e.clientX, 
 y: e.clientY, 
}; 
 
 document.addEventListener ('mousemove', mouseMoveHandler); 
 document.addEventListener ('mouseup', mouseUpHandler); 
}; 
  

  const mouseMoveHandler = function (e) {
 const dx = e.clientX - pos.x; 
 const dy = e.clientY - pos.y; 
 
 ele.scrollTop = pos.top - dy; 
 ele.scrollLeft = pos.left - dx; 
}; 
  

  const mouseDownHandler = function (e) {
 ele.style.cursor = 'grabbing'; 
 ele.style.userSelect = 'нет'; 
 ... 
};  

  const mouseUpHandler = function () {
 ele.style.cursor = 'захватить'; 
 ele.style.removeProperty («пользовательский выбор»); 
};  

 
 Копировать 
  function scrollingElement () {
  return document.scrollingElement || document.documentElement;
}