Как удалить класс, если scrollTop == 0?

Question

Как удалить класс, если scrollTop == 0?

Теперь, когда вы прокручиваете страницу вниз, панель навигации работает как надо.

Но когда я прокручиваю страницу до самого верха - класс не удаляется. Подскажите, как поступить в этой ситуации.

Мой код

var navbar = document.querySelector('.navbar');
var scrollTop = window.pageYOffset;
var body = document.querySelector('body');

window.onscroll = function() {
  if (window.pageYOffset > scrollTop) {
    navbar.classList.add('slideUp');

    body.classList.remove('styling');
    navbar.classList.remove('styling');
  } else if (window.pageYOffset < scrollTop) {
    body.classList.add('styling');
    navbar.classList.add('styling');
    navbar.classList.remove('slideUp');
  }

  scrollTop = window.pageYOffset;

}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  padding-top: 80px;
  min-height: 2000px;
}

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #00f;
  height: 80px;
  transition: transform .5s ease;
}

.navbar.styling {
  height: 60px;
}

.navbar.slideUp {
  transform: translateY(-100%);
}

<nav class="navbar"></nav>

Спасибо. Буду рад любой помощи

Answer 1

Просто отметьте scrollTop после того, как его значение было обновлено с window.pageYOffset:

var navbar = document.querySelector('.navbar');
var scrollTop = window.pageYOffset;
var body = document.querySelector('body');

window.onscroll = function() {
  if (window.pageYOffset > scrollTop) {
    navbar.classList.add('slideUp');

    body.classList.remove('styling');
    navbar.classList.remove('styling');
  } else if (window.pageYOffset < scrollTop) {
    body.classList.add('styling');
    navbar.classList.add('styling');
    navbar.classList.remove('slideUp');
  }

  scrollTop = window.pageYOffset;

  // Here
  if (scrollTop === 0) {
    body.classList.remove('styling');
    navbar.classList.remove('styling');
  }
  
  console.log(`for scrollTop = ${scrollTop}, classes are:`, navbar.classList.value);
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  padding-top: 80px;
  min-height: 2000px;
}

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #00f;
  height: 80px;
  transition: transform .5s ease;
}

.navbar.styling {
  height: 60px;
}

.navbar.slideUp {
  transform: translateY(-100%);
}

<nav class="navbar"></nav>