Почему некорректно работает скрипт?

312

15 января 2018, 10:12

Добрый день! Для фиксации блоков использую скрипт:

$(document).ready(function($) {
    $nav = $('.header_box');
    $nav2 = $('.content_box_fixed');
    $window = $(window);
    $h = $nav.offset().top;
    $h2 = $nav.offset().top;
    $window.scroll(function() {
    if ($(this).width() > 800) {
        if ($window.scrollTop() > $h) {
            $nav.addClass('header_box_fixed');
        } else {
            $nav.removeClass('header_box_fixed');
        }
    }
    if ($(this).width() > 800) {
        if ($window.scrollTop() > $h2) {
            $nav2.addClass('content_box_fixed_active');
        } else {
            $nav2.removeClass('content_box_fixed_active');
        }
    }
    });
});

Здесь пример не публикую, потому что здесь работает четко. На сайте же во время прокрутки страницы, скрипт срабатывает с каким-то дерганьем, а именно общий контейнер "подскакивает" во время срабатывания скрипта. Не могу понять почему. Посмотрите, пожалуйста, где ошибка? Благодарю!

Answer 1

Не скажу по конкретному примеру, но в практике такое встречаю. Причина чаще всего такая - между двумя блоками (блоком, который становится fixed при скроле и блок под ним/над ним) есть либо padding либо margin. Когда элемент получает свойство fixed, разница этих padding либо margin не учитывается и происходит скачёк елемента на высоту, равную padding либо margin. Проверяйте.

UPD:

Конкретно по вашему примеру - когда .header получает fixed, следующий за ним .conteiner поднимается до упора вверх. Поэтому он должен получать margin-top:30px (это высота .header) что бы компенсировать потерю упора от .header.

$(document).ready(function($) {
    $nav = $('.header_box');
    $nav2 = $('.content_box_fixed');
    $window = $(window);
    $h = $nav.offset().top;
    $h2 = $nav.offset().top;
    $window.scroll(function() {
        if ($(this).width() > 800) {
            if ($window.scrollTop() > $h) {
                $nav.addClass('header_box_fixed');
            } else {
                $nav.removeClass('header_box_fixed');
            }
            if ($window.scrollTop() > $h2) {
      /* --> */ $nav2.addClass('content_box_fixed_active').css('padding-top', $nav.height() + 'px'); // тут
            } else {
      /* --> */ $nav2.removeClass('content_box_fixed_active').css('padding-top', 'initial'); // тут
            }
        }
    });
});