Conceal the Angular Material toolbar (top navigation bar) automatically when scrolling downwards

Question

Conceal the Angular Material toolbar (top navigation bar) automatically when scrolling downwards

In my Angular application, the main navigation consists of a standard toolbar positioned at the top of the page.

My goal is to have this navigation bar smoothly scroll up with the user as they scroll down, and then reappear when they scroll back up.

I attempted to achieve this functionality using window.pageYOffset, but I encountered an issue where this value always remained 0. Additional details on this can be found here.

For reference, I have created a Stackblitz demo showcasing my current set up for the navbar, which can be viewed here.

css angular typescript user-experience

Answer 1

Answer №1

A JavaScript-free Solution

You have the option to achieve the desired effect using only CSS. By implementing this method, the navbar will gradually disappear as you scroll down.

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

Implementing onScroll Functionality

Add a scroll listener to your container div and assign a class to the navbar based on the direction of the scrolling action.

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 with opacity for smoother transitions */
}

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

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

<!-- Main content goes here -->

</div>

This functionality can also be achieved using HostListener, but it requires that the parent node of your component is scrollable (which may not be the case in your scenario).

Answer 2

A JavaScript-free Solution

You have the option to achieve the desired effect using only CSS. By implementing this method, the navbar will gradually disappear as you scroll down.

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

Implementing onScroll Functionality

Add a scroll listener to your container div and assign a class to the navbar based on the direction of the scrolling action.

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 with opacity for smoother transitions */
}

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

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

<!-- Main content goes here -->

</div>

This functionality can also be achieved using HostListener, but it requires that the parent node of your component is scrollable (which may not be the case in your scenario).

Answer 3

Answer №2

I stumbled upon a fantastic example that showcases how to create a reactive sticky header in Angular. Check it out here: https://example.com/reactive-sticky-header-in-angular-123456789

Answer 4

I stumbled upon a fantastic example that showcases how to create a reactive sticky header in Angular. Check it out here: https://example.com/reactive-sticky-header-in-angular-123456789

Conceal the Angular Material toolbar (top navigation bar) automatically when scrolling downwards

Answer №1

Answer №2

Similar questions

How can the PrimeNG Listbox be customized to enable drag and drop re-ordering of items?

Testing an HTTP error Observable with Jasmine and RxJS simulations

In Firefox 50.0, the button's resizing feature causes the parent div container outline to adjust size

The element is not positioned correctly due to the absolute positioning

Vanishing Submit Button with CSS

A guide on setting up a countdown timer in Angular 4 for a daily recurring event with the help of Rxjs Observable and the Async Pipe

Achieving Vertical Alignment of Text and Icon in the Same Line Using HTML and CSS

Verifying the Presence of an Image in the Public Directory of Next JS

Exploring the weather API integration with Angular 4

Transforming encoded information into a text format and then reversing the process

What is the best way to integrate my custom JavaScript code into my WordPress theme, specifically Understrap?

Is it possible to create an instance in TypeScript without using class decorators?

"Stylish footer design in CSS featuring a sleek overflow scrollbar

What is the best way to convert this into a distinct function using typescript?

Exploring the Capabilities of TypeScript 1.8 in Visual Studio 2017

Is there a way to utilize PHP/HTML to exhibit a diverse array of random images as dynamic background visuals?

Creating a design with CSS that features three main content columns of equal height, all of which are scrollable and have fluid heights, along with a sticky

Creating a CSS rollover effect for your logo on a WordPress website

Tips for presenting SVG symbols using Interpolation within Angular 7 from a JSON document

What is the proper way to integrate plotly types in Angular using a local version?