Лого Architector Agency

08 мар13:07

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

  • Теги: javascript

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

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

Хотите реализовать проект?