Задать вопрос
@uranus235
javascript

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

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

На первом блоке, который растянут на весь экран отображаются какие-нибудь картинки и еще шапка с черным фоном. Как сделать чтобы при достижении второго блока шапка меняла свой класс и фон менялся на белый? Еще нужно чтобы элементы второго блока начинались анимироваться только при достижении второго блока, а не при загрузке страницы. Наглядным примером тому может послужить сайт Apple.
  • Вопрос задан
  • 9923 просмотра
Комментировать
Подписаться 8 Оценить Комментировать
Решения вопроса 2
iiil
@iiil
Инженер и вэб-дизайнер, рисую.
Вы можете поискать готовые решения или напишите сами.
Вот я писал для каких-то вопросов, будет что-то непонятно — пишите
codepen.io/iiil/pen/lLuys
codepen.io/iiil/pen/Lczgi
Ответ написан
1 комментарий
1 комментарий
@stas3572
шапка фиксированная, как я понял..

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

В общем проверяете скролл, если скролл равен значению положения второго элемента - запускаете анимации, меняете классы хедеру, в общем все, что вашей душе угодно
Ответ написан
1 комментарий
1 комментарий
Пригласить эксперта
Ответы на вопрос 3
DaFive
@DaFive
Посмотрите в сторону плагина JQ Scrollspy. Он отслеживает, что вы в данный момент смотрите на странице, когда скроллите. Ну или его аналог.
Ответ написан
Комментировать
Комментировать
@yamaha252
можно использовать waypoints
Ответ написан
Комментировать
Комментировать
@jutsu
А почему бы не использовать js.
Ответ написан
1 комментарий
1 комментарий
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
SummerWeb • Ярославль
от 100 000 до 140 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
Middle JavaScript Developer
AppsTrain.io
от 80 000 до 180 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Подключить сервер к сети
27 апр. 2024, в 02:39
1500 руб./за проект
Необходимо сверстать приложение согласно макету Figma используя React
26 апр. 2024, в 22:22
1500 руб./за проект
Написать модуль подключения матрицы Sony к ПЛИС (Verilog)
26 апр. 2024, в 21:30
15000 руб./за проект
Ещё заказы