Как реализовать fixed хедер при скроллинге?

Question

[kodenji]

Как реализовать поведение хедера (меню) как на сайте новой газеты (https://www.novayagazeta.ru/) при скроллинге.
Я накидал код( я новичек:-)) , но не могу понять как они translate3d(0, 0, 0) изменяют, когда крутишь вверх. Как они относительное значение получили scrollTop() при прокрутке наверх.

var lastYPos = 0;
var navHeight = $('header').outerHeight();

$(window).scroll(function(){
  var scrollTop = $(window).scrollTop();
  $('header').each(function(){
    var yPos = scrollTop;
    console.log(yPos);
    var yPosDelta =  lastYPos - yPos;
    if (yPos < navHeight) {
      $(this).css({transform: 'translate3d(0,' + -yPos +'px' + ',0)'});
    } else {
      $(this).css({transform: 'translate3d(0,' + -navHeight +'px' + ',0)'});
    }
// Тут условие для похода вверх, можно добавить в css transition 
// и будет как в других реализациях,  когда плавно выезжает и прячется обратно весь блок.
    if (yPosDelta > 0) {  
      $(this).css({transform: 'translate3d(0,' + 0 +'px' + ',0)'});
    }
    lastYPos = yPos;
  });
});

Answer 1

[Егор Лавренов]

Возможно я ошибаюсь, но мне кажется ты перемудрил.
При скроле вниз добавляй шапке класс (напр. .hidden), у которого translateY(-60px)
При скролле верх этот класс удаляй

Comments

[kodenji]

Спасибо, мне как раз нравится эффект, когда крутишь обратно вверх то хедер появляется постепенно ( как на новой газете), а не просто выезжает весь. Просто интересно стало, как они так сделали, понятно что это не обязательно и можно сделать как обычно.