Как добавить или удалить класс при скролле в нужном месте?

• Теги: javascript, Создание сайтов

• Просмотров: 6897

• Время прочтения: 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');
            }
    });