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

354

16 апреля 2017, 01:42

Есть тег <header>, который имеет свойство, position:relative и есть класс хэдэра .header-fixed, который имеет свойство position:fixed

<header class="header-fixed">
.........
</header>

Получается, что изначально (при закгрузке страницы) хэдэр должен быть статичный, но когда прокручиваешь сайт, второй экран (в моем случае это #box1) доходит верха браузера, то тогда добавляется класс .header-fixed. Вообще можно такое на js организовать?

Сам в js не силен, поэтому пробовал найти в инете что-то подходящее и допилить под себя, пробовал так:

function getBodyScrollTop(){
if(come('#box1') == '1'){
$('header').attr('class', '');
$('header').css('position', 'relative');
$('header').attr('class', 'absolute-menu');
$('header').css('transition', 'all 0.3s');
}

И ничего естественно не вышло. Как понял скрипт такое как "('header')" понимает ни как тег, а как класс. Можете, ребята, помочь со скриптом как вообще такое организовывается?

Answer 1

Нужно повесить обработчик на событие скролла:

  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');
            }
    });

Answer 2

Вы можете при прокрутке страницы получить позицию top и в определённом положении страницы поменять класс для header

$(window).scroll(function() {
var height = $(window).scrollTop();
     /*Если сделали скролл на 100px задаём новый класс для header*/
if(height > 100){
$('header').addClass('header-fixed');
} else{
     /*Если меньше 100px удаляем класс для header*/
$('header').removeClass('header-fixed');
}
});

Обновленно

или так:

$(window).scroll(function() {
    var box1 = $('#box1').offset().top;
         /*Если сделали скролл на 100px задаём новый класс для header*/
    if(box1 > 100){
    $('header').addClass('header-fixed');
    } else{
         /*Если меньше 100px удаляем класс для header*/
    $('header').removeClass('header-fixed');
    }
    });