Задать вопрос
EaGames
@EaGames
Front-end developer
javascript

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

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

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


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


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

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
summer • Ярославль
от 100 000 до 140 000 ₽
Junior JavaScript Developer
КРАФТТЕК • Санкт-Петербург
от 60 000 до 80 000 ₽
JavaScript разработчик
Мэтч
от 80 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Собрать сайт на Vue / Laravel
19 апр. 2024, в 11:14
65000 руб./за проект
Отрисовка дизайна главной и внутренней
19 апр. 2024, в 11:08
5000 руб./за проект
Работы по АСУТП
19 апр. 2024, в 10:59
150000 руб./за проект
Ещё заказы