Angular4+ngx-fullpage实现首屏隐藏固定头部的方法咨询

Great question! You're on the right track with wanting to use ngIf to control the header's visibility, and ngx-fullpage gives you a straightforward way to track the current section via its service and events. Here's how to implement this:

Step 1: Track the current section in your component #

First, add a variable to your HomepageComponent to monitor if we're on the first section, and set up a subscription to listen for section changes (don't forget to clean up the subscription later to avoid memory leaks):

import { Component, OnInit, OnDestroy, Input } from '@angular/core';
import { MnFullpageService, MnFullpageOptions } from 'ngx-fullpage';
import { Subscription } from 'rxjs'; // Add this import

@Component({
  selector: 'app-homepage',
  templateUrl: './homepage.component.html',
  styleUrls: ['./homepage.component.css']
})
export class HomepageComponent implements OnInit, OnDestroy { // Add OnDestroy hook
  @Input() public options: MnFullpageOptions = new MnFullpageOptions({
    controlArrows: false,
    scrollingSpeed: 700,
    menu: '.menu',
    css3: true,
    anchors: [
      'menuAnchor1',
      'menuAnchor2',
      'menuAnchor3',
      'menuAnchor4',
      'menuAnchor5',
      'menuAnchor6'
    ]
  });

  isFirstSection = true; // Initialize as true since we start on the first section
  private afterLoadSubscription: Subscription; // Manage the event subscription

  constructor(public fullpageService: MnFullpageService) { }

  ngOnInit() {
    // Subscribe to the afterLoad event to detect when we switch sections
    this.afterLoadSubscription = this.fullpageService.afterLoad.subscribe((sectionData) => {
      // Check if we're on the first section (fullpage.js uses 1-based indexing)
      this.isFirstSection = sectionData.index === 1;
      // Alternatively, you can check using the anchor link directly:
      // this.isFirstSection = sectionData.anchorLink === 'menuAnchor1';
    });
  }

  ngOnDestroy() {
    // Clean up the subscription when the component is destroyed
    if (this.afterLoadSubscription) {
      this.afterLoadSubscription.unsubscribe();
    }
  }
}

Step 2: Control the header's visibility #

Update your template to conditionally show the header only when we're not on the first section using *ngIf:

<div class="menu-wrapper">
  <ul class="menu">
    <li data-menuanchor="menuAnchor1" class="active" ><a href="#menuAnchor1"></a></li>
    <li data-menuanchor="menuAnchor2"><a href="#menuAnchor2"></a></li>
    <li data-menuanchor="menuAnchor3"><a href="#menuAnchor3"></a></li>
    <li data-menuanchor="menuAnchor4"><a href="#menuAnchor4"></a></li>
    <li data-menuanchor="menuAnchor5"><a href="#menuAnchor5"></a></li>
    <li data-menuanchor="menuAnchor6"><a href="#menuAnchor6"></a></li>
  </ul>
</div>
<div [mnFullpage]="options">
  <div class="section fp-section fp-table">
    <div class="fp-tableCell">
      <app-page1></app-page1>
    </div>
  </div>
  <div class="section fp-section fp-table">
    <div class="fp-tableCell">
      <app-page2></app-page2>
    </div>
  </div>
  <div class="section fp-section fp-table">
    <div class="fp-tableCell">
      <app-page3></app-page3>
    </div>
  </div>
  <div class="section fp-section fp-table">
    <div class="fp-tableCell">
      <app-page4></app-page4>
    </div>
  </div>
  <div class="section fp-section fp-table">
    <div class="fp-tableCell">
      <app-page5></app-page5>
    </div>
  </div>
  <div class="section fp-section fp-table">
    <div class="fp-tableCell">
      <app-page6></app-page6>
    </div>
  </div>
</div>
<!-- Show header only when not on the first section -->
<app-header *ngIf="!isFirstSection"></app-header>

Bonus: Add smooth transitions (optional) #

If you want a gentle fade effect instead of abrupt hiding/showing, replace *ngIf with a CSS class toggle:

Template update:

<app-header [class.hidden-header]="isFirstSection"></app-header>

Add this to your homepage.component.css:

app-header {
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.hidden-header {
  opacity: 0;
  visibility: hidden;
  pointer-events: none; /* Prevent accidental clicks when hidden */
}

Why this works #

The afterLoad event from MnFullpageService triggers every time a new section finishes loading (after scrolling or navigating via the menu). It returns data including the active section's 1-based index and anchor link, so we can reliably update our isFirstSection flag to control the header's visibility. This approach leverages ngx-fullpage's built-in functionality, so you don't have to manually track scroll positions or anchor states yourself.

内容的提问来源于stack exchange，提问作者C瓢峄漬g Lâm