Выкатывающийся хедер при скролле вверх

Question

У меня есть страничка, в ней хедер (шапка сайта). Как сделать, чтобы при загрузке страницы шапка была не видна, а при скролле вверх, она появлялась? Т.е. создавался эффект "выкатывания" шапки

Answer 1

Запомнить текущую позицию скролла и повесить на страницу событие прокрутки. При прокрутке сравнить значение предыдущей позиции скрола с текущей позицией, чтобы определить в какую сторону идёт прокрутка и если она идёт вверх, то показать header

Answer 2

Пример jQuery:

var $header = $(".header")
var scroll = 0
var active = "active"
$(window).scroll(function() {
  if ($(window).scrollTop() > scroll) {
    $header.addClass(active)
  } else {
    $header.removeClass(active)
  }
})

body {margin: 0; padding: 0;}

section {height: 100vh;}
.one {background-color: chocolate;}
.two {background-color: mistyrose;}
.three {background-color: gold;}

.header {
  background-color: red;
  height: 100px;
  position: fixed;
  top: -100px;
  left: 0;
  right: 0;
  transition: all 1s;
}

.active {
  top: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="header">Header</div>
<section class="one"></section>
<section class="two"></section>
<section class="three"></section>

update для автора

var $header = $(".header")
var scroll = 0
var active = "active"
$(window).scroll(function() {
  if ($(window).scrollTop() > scroll) {
    $header.addClass(active)
  } else {
    $header.removeClass(active)
  }
})

body {margin: 0; padding: 0;}

section {height: 100vh;}
.one {background-color: chocolate;}
.two {background-color: mistyrose;}
.three {background-color: gold;}

.header {
  background-color: red;
  height: 100px;
  margin-top: -100px;
  transition: all 1s;
}

.active {
  margin-top: 0px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="header">Header</div>
<section class="one"></section>
<section class="two"></section>
<section class="three"></section>

БЛОГ НА HUSL

Выкатывающийся хедер при скролле вверх

Ответы (2 шт):