如何在Angular 8中实现滚动时固定头部导航？

Hey there! Let's get that sticky header working properly for you. I noticed a few small issues in your current code that are keeping it from functioning as expected. Let's walk through the fixes step by step.

1. Fix the TypeScript Logic #

Your current scroll handler isn't actually updating the actives variable correctly, and you're not initializing it. Also, using Angular's ViewChild instead of document.getElementById is more aligned with Angular's component best practices.

Here's the corrected TypeScript code:

import { Component, HostListener, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'app-your-header-component', // Replace with your actual component selector
  templateUrl: './your-header.component.html',
  styleUrls: ['./your-header.component.css']
})
export class YourHeaderComponent {
  // Rename to a more semantic variable name
  isSticky = false;
  @ViewChild('myHeader') headerElement!: ElementRef;
  private stickyOffset!: number;

  ngAfterViewInit() {
    // Wait for the view to load before getting the offset position
    this.stickyOffset = this.headerElement.nativeElement.offsetTop;
  }

  @HostListener("window:scroll", ['$event'])
  scrollHandler(event: Event) {
    // Simplify the logic: directly assign the boolean result
    this.isSticky = window.pageYOffset > this.stickyOffset;
  }
}

Key Fixes Here: #

• Renamed actives to isSticky for better readability
• Used ViewChild to reference the header element instead of direct DOM querying
• Moved the offsetTop calculation to ngAfterViewInit to ensure the DOM element is fully rendered
• Simplified the scroll check to directly set the boolean value (no unnecessary if/else)

2. Correct the HTML Binding #

Your ngClass syntax was incorrect—you need to bind it to the isSticky variable to toggle the class properly. Also, remove the (scroll) event binding since you're already using HostListener on the window:

<div class="container-fluid main-header" #myHeader [ngClass]="{ actives: isSticky }">
  <div class="d-flex justify-content-around">
    <div><a routerLink="/app"><img src="assets/logo/logo.png" width="150px" class="logo-mobile"></a></div>
    <div class="search-div">
      <form action="">
        <input class="search-div" type="text" name="" id="searchInput" placeholder="Search for products">
        <div class="show search-icon input-group-append p-2">
          <i class="fa fa-search"></i>
        </div>
        <button class="hide search-botton">SEARCH</button>
      </form>
    </div>
  </div>
</div>

Key Fixes Here: #

• Added the template reference #myHeader for ViewChild to target
• Changed [ngClass]="'!actives'" to [ngClass]="{ actives: isSticky }"—this adds the actives class only when isSticky is true
• Removed the unnecessary (scroll) event binding

3. Enhance the CSS for a Smooth Experience #

Your base actives class works, but let's add a few tweaks to prevent layout jumps and ensure the header stays visible:

/* Give your header a fixed height to avoid page jump when it becomes sticky */
.main-header {
  height: 80px; /* Adjust to match your header's actual height */
  transition: all 0.3s ease; /* Optional: adds a smooth transition when sticking */
}

.actives {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000; /* Ensures the header stays above other content */
  background-color: white; /* Add this if your header has a transparent background by default */
}

Key Fixes Here: #

• Added a fixed height to the main header to prevent the page content from shifting up when the header becomes fixed
• Added z-index to ensure the header doesn't get covered by other elements
• Added an optional transition for a smoother sticky effect
• Added a background color (adjust to match your design) to avoid transparency issues when fixed

Alternative: If You Prefer document.getElementById #

If you don't want to use ViewChild, you can adjust the scroll handler to include a null check for safety:

@HostListener("window:scroll", ['$event'])
scrollHandler(event: Event) {
  const header = document.getElementById("myHeader");
  if (!header) return; // Exit if the element isn't found
  const stickyOffset = header.offsetTop;
  this.isSticky = window.pageYOffset > stickyOffset;
}

Final Result #

Now when you scroll past the header's initial position, the actives class will be applied, fixing the header to the top of the viewport. When you scroll back up, the class is removed, and the header returns to its original position.

内容的提问来源于stack exchange，提问作者Iamlimo