Эффекты прокрутки HTML

Question

Я заметил, что многие сайты в последнее время внедряют новые типы эффектов прокрутки. Вот один пример:

https://banksimple.com/

При первой прокрутке начальный раздел остается на месте (z-индекс равен 1?), А содержимое прокручивается поверх него. Он также использует фрагменты и динамически выделяет свою панель навигации в зависимости от того, в какую область прокручивается пользователь.

Я видел несколько сайтов, использующих подобные методы. Один (на который я не могу найти ссылку) динамически меняет фон.

Существует ли распространенная техника для сайтов такого типа?

Answer 1

Один из способов - объединить CSS + JavaScript, скажем, (jQuery)

CSS:

position:fixed для верхней панели.

Использовать jQuery offset для определения положения контейнера и после того, как вы сможете применить CSS-классы для «подсветки навигационной панели».

Answer 2

Есть несколько способов сделать это, но самый простой - просто сделать div и использовать CSS

"position:fixed;" 

недвижимость. Это заставит div придерживаться именно того места, где он находится, относительно окна браузера.

Возможно, вы также захотите установить для z-index большое значение, чтобы div всегда оставался поверх остальной части страницы.

Answer 3

Для меню и заголовка это простое CSS-решение с использованием position: fixed и z-index. И меню, и заголовок имеют position: fixed, в то время как меню имеет большое значение z-index, а основное содержимое имеет немного меньшее значение:

#menu { position: fixed; top: 0; left: 0; z-index: 2000; }
#header { position: fixed; top: ??; left: 0; }
#wrapper { z-index: 10; }

Что касается фрагмента, это делается с помощью JS. W3Fools имеет то же самое, что делается с помощью jQuery. Возможно, вы сможете расшифровать скрипт . Похоже, он подключается к событию прокрутки документа, проверяя, находится ли позиция элемента над позицией области просмотра, и предпринимает соответствующие действия.

Answer 4

В первых двух разделах используется position:fixed.

Это фиксирует элементы в позиции на странице.Они не двигаются даже при прокрутке.

В секции прокрутки используется position:absolute с высоким z-index.

Это хорошо прокручивается и, поскольку он имеет z-index больше, чем fixed position элементов, он прокручивает их.