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

Question

[Sergiu Mitu]

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

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

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

Однако при прокрутке шапка мелькает (исчезает на мгновение), как от этого избавиться?

Answer 1

[Юрий Лобанов]

Нужен контекст, потому что если Вы хотите фиксировать шапку наверху и ее высота равна 80, то в скрипте должен стоять 0. codepen.io/iiil/pen/InDbp
Но в таком случае вообще не понятно, зачем пользоваться js, можно просто присвоить класс fixed сразу.
Попробуйте в моем скрипте изменить на 80 и будет мелькание. В любом случае, повторяю, нужно смотреть весь код целиком.
Величина отличная от нуля должна быть тогда, когда Вы хотите сделать что-то такое codepen.io/iiil/pen/bpmhl

Comments

[Sergiu Mitu]

по вашему примеру, все ровно мелькает

[Юрий Лобанов]

@EaGames у меня по ссылке ничего не моргает.

[Юрий Лобанов]

@EaGames и повторяю, в Вашем случае вообще можно обойтись без js. Присвойте div#slogan {margin-top:80px;}
А .header {position:fixed; width:100%;}

[Sergiu Mitu]

@iiil спасибо, на без js все работает гладко. Собственно проблема решена. Но все же мне не даёт покоя почему через js, делая то же действия, мелькает..

[Юрий Лобанов]

@EaGames если бы Вы на примере показали, а то я только догадываться могу что там и как мелькало.

Answer 2

[Виталий Желтяков]

У Вас скрипт отрабатывает каждый раз при скроллинге, вызывая постоянную перерисовку.
Нужно добавить проверку на наличие класса fixed:

$(window).scroll(function(){
      if ($(this).scrollTop() > 80) {
          if (!($('.header').hasClass('fixed'))) $('.header').addClass('fixed');
      } else {
          if ($('.header').hasClass('fixed')) $('.header').removeClass('fixed');
      }
});

Answer 3

[Владимир]

Когда вы даёте блоку .header класс fixed, вы выдираете его из контекста, в результате чего вместо него появляется пустое место, из-за которого происходит проскакивание, которое, кажется, и воспринимается как мелькание. Надо как-то так jsfiddle.net/br3t/DLP9Z

Comments

[Sergiu Mitu]

спасибо, и правда до этого даже скролл работал 'странно' (перепрыгивал те самый 80px шапки).
Однако, проблема с мельканием осталась.