Автоматическое скрытие панели инструментов Угловой материал (верхняя панель навигации) при прокрутке вниз

Question

В настоящее время у меня есть приложение Angular, которое использует стандартную панель инструментов в качестве верхней навигации.

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

Я пытался использовать window.pageYOffset, но, как уже упоминалось, здесь , это значение всегда возвращает 0.

Я сделал Stackblitz с моей текущей настройкой для моей навигационной панели здесь .

Answer 1

Путь без JS

Вы можете сделать трюк только с помощью CSS. Это будет постепенно скрывать панель навигации, как только вы начнете прокручивать.

.exemple-toolbar {
  position: sticky;
  top: -200px;
  padding-top: 200px;
  height: 250px;
}

Способ прокрутки

Установите прослушиватель прокрутки в контейнере div и добавьте класс в панель навигации в зависимости от направления прокрутки.

scrollTop = 0;
hideNav = false;

onScroll(event) {
  this.hideNav = this.scrollTop < event.target.scrollTop;
  this.scrollTop = event.target.scrollTop;
}

.container {
  height: 100vh;
  overflow-y: scroll;
  overflow-x: hidden;
}

.nav {
  position: fixed;
  height: 50px;
  display: flex;
}

.nav.hide-nav {
  display: none; /* You can play on opacity for nice transitions*/
}

<div class="container" (scroll)="onScroll($event)">

  <div class="nav" [class.hide-nav]="hideNav">
     <!-- Nav -->
  </div>

<!--content-->

</div>

Это также может работать с HostListener, но родительский узел вашего компонента должен быть прокручиваемым (что не так в вашем примере)