0

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

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

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

1 ответ 1

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'); // тут
            }
        }
    });
});
4
  • @LADYX обновил в ответе.
    – Kirill
    14 янв 2018 в 14:42
  • Создайте пример, будем посмотреть. Я по ссылке проверил - когда хедер клеится к топу, контейнер под ним подскакивает под него. маржин решает).
    – Kirill
    14 янв 2018 в 14:51
  • @LADYX обновил в ответе.
    – Kirill
    14 янв 2018 в 15:11
  • хз... скорее всего совместимось. Попробуйте вместо margin-top поставить padding-top. Либо прописать дополнительно маржин с вендорным префиксом -webkit-margin-top.
    – Kirill
    14 янв 2018 в 20:35

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.