Как выполнить функцию при достижении div?

Question

[uranus235]

Добрый день всем. Хотел бы сделать landing page для практики. Допустим на странице есть 3 div блока с шириной 100vw и высотой 100vh. Следовательно, для каждого устройства разные ширина и длина блока. ID первого блока - #page1, второро - #page2, третьего - #page3.

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

Answer 1

[Юрий Лобанов]

Вы можете поискать готовые решения или напишите сами.
Вот я писал для каких-то вопросов, будет что-то непонятно — пишите
codepen.io/iiil/pen/lLuys
codepen.io/iiil/pen/Lczgi

Comments

[uranus235]

Спасибо за примеры :)

Answer 2

[stas]

шапка фиксированная, как я понял..

можно двумя способами отследить что вы дошли до второго блока, но оба так или иначе с применением .scrollTop():
$('#page1').outerHeight() - высота первого блока, если блоки идут встык;
$('#page2').offset().top - положение второго блока относительно начала страницы

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

Comments

[uranus235]

Спасибо :)

Answer 3

[Vlad]

Посмотрите в сторону плагина JQ Scrollspy. Он отслеживает, что вы в данный момент смотрите на странице, когда скроллите. Ну или его аналог.

Answer 4

[yamaha252]

можно использовать waypoints

Answer 5

[jutsu]

А почему бы не использовать js.

Comments

[Владимир Муковоз]

А как?