08 мар13:07
Как добавить или удалить класс при скролле в нужном месте?
Теги: javascript, Создание сайтов
Просмотров: 3078
Время прочтения: 3 минуты.
Навигация по статье:
Часто, при создании сайта, требуется добавить или удалить класс при скролле в нужном месте. Сайчас мы с вами рассмотрим, как это можно реализовать. Есть тег <header>
, который имеет свойство, position:relative и есть класс header .header-fix, который имеет свойство position:fixed
.........
При загрузке страницы header должен быть статичный, так как он содержит меню с якорными ссылками для перемещения по лендингу, и при прокрутки сайта до определенного блока, например это блок с информацией о компании #about, нам необходимо присвоить класс .header-fix header
Для этого мы повесим обработчик на событие скролла:
var $body = $('body'), $header = $('header'); $(document).on('scroll', function () { var position = $body.scrollTop(), block_position = $('#box1').offset().top; // расположение блока, от которого и зависит фиксированность хэдера if (position > block_position) { // если позиция скролла страницы больше, то ставим фикс $header.addClass('header-fixed'); } else { $header.removeClass('header-fixed'); } });
Рейтинг: 2,6/5 - 5
голосов