EaGames
@EaGames
Front-end developer

Как избавиться от мелькания блока при добавлении класса fixed?

Собственное есть страница, хочу зафиксировать шапку после скроллинга, делаю так:

$(window).scroll(function(){
      if ($(this).scrollTop() > 80) { //80 размер шапки
          $('.header').addClass('fixed');
      } else {
          $('.header').removeClass('fixed');
      }
});


.fixed {
    position: fixed;
    top: 0;
    z-index: 10;
}


Однако при прокрутке шапка мелькает (исчезает на мгновение), как от этого избавиться?
  • Вопрос задан
  • 2593 просмотра
Решения вопроса 1
iiil
@iiil
Инженер и вэб-дизайнер, рисую.
Нужен контекст, потому что если Вы хотите фиксировать шапку наверху и ее высота равна 80, то в скрипте должен стоять 0. codepen.io/iiil/pen/InDbp
Но в таком случае вообще не понятно, зачем пользоваться js, можно просто присвоить класс fixed сразу.
Попробуйте в моем скрипте изменить на 80 и будет мелькание. В любом случае, повторяю, нужно смотреть весь код целиком.
Величина отличная от нуля должна быть тогда, когда Вы хотите сделать что-то такое codepen.io/iiil/pen/bpmhl
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
У Вас скрипт отрабатывает каждый раз при скроллинге, вызывая постоянную перерисовку.
Нужно добавить проверку на наличие класса fixed:
$(window).scroll(function(){
      if ($(this).scrollTop() > 80) {
          if (!($('.header').hasClass('fixed'))) $('.header').addClass('fixed');
      } else {
          if ($('.header').hasClass('fixed')) $('.header').removeClass('fixed');
      }
});
Ответ написан
Комментировать
Когда вы даёте блоку .header класс fixed, вы выдираете его из контекста, в результате чего вместо него появляется пустое место, из-за которого происходит проскакивание, которое, кажется, и воспринимается как мелькание. Надо как-то так jsfiddle.net/br3t/DLP9Z
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы