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

Is it possible to expand or merge Nestjs decorators?

In the absence of localstorage, what alternatives do we have for storing values?

SASS fails to recognize the variable

Having trouble linking tables to Node.js with TypeScriptyntax?

Unable to attach 'gridOptions' as it is not a recognized attribute of 'ag-grid-angular' component (Angular4)

Bootstrap allows you to create a responsive grid

Encountering an issue that states that jQuery must be included before Bootstrap's JavaScript is causing an

What is the best way to extract data from multiple FormControl instances using RxJS in Angular?

How to Retrieve the Current Item in *ngFor Loop Using TypeScript in Angular 4

What is the best way to dynamically update or display unique CSS styles when a service is invoked or provides a response in AngularJS using JavaScript

Could Angular be automatically applying margins or padding to my component?

Using Angular styleUrls directory over individual files

How can I transform this imperative reducer into a more declarative format using Ramda?

Chrome causing the vanishing act of floated iframes

Picture is not displaying properly post-rotation

Which specific part is the perfect choice?

Change the appearance of a div based on the presence of a certain class within a child div using jQuery styling techniques

Bootstrap 5 - Create a full-screen modal perfectly aligned with its parent element

What steps can be taken to default to a Google web font when Helvetica is not available on the user's device?

Directly mapping packages to Typescript source code in the package.json files of a monorepo