Javascript 在不使用jquery滚动时更改导航栏内容（滚动时标题粘滞）？

滚动时如何更改导航栏内容？没有jquery

这是我的代码导航栏，有角度， 但我相信解决方案可以用香草js

<nav class="nav-background">
  <div class="nav-wrapper ">
    <!-- <a href="#!" class="brand-logo center"><img src="../../../../../assets/icons/icon-96x96.png" alt=""></a> -->
    <div class="row valign-wrapper" >
      <div class="valign col s2">
        <a routerLink="profile"><img class="circle header img-custom" src="{{User.foto}}" *ngIf="User"></a>
      </div>
      <div class="col s6 content-header">
        <div class="col s12 name-header" *ngIf="User">{{User.name}}</div>
        <div class="row">
          <div class=" nivel-header" *ngIf="User">
            {{User.nivel | titlecase}}
          </div>
          <div class=" stars" *ngIf="User">
            <i class="material-icons  star star-without-color" [ngClass]="{'star-with-color': checkNivel(1)}">star</i>
            <i class="material-icons  star star-without-color" [ngClass]="{'star-with-color': checkNivel(2)}">star</i>
            <i class="material-icons  star star-without-color" [ngClass]="{'star-with-color': checkNivel(3)}">star</i>
            <i class="material-icons  star star-without-color" [ngClass]="{'star-with-color': checkNivel(4)}">star</i>
            <i class="material-icons  star star-without-color" [ngClass]="{'star-with-color': checkNivel(5)}">star</i>
          </div>
        </div>

        <div class=" col s12 balance-header"*ngIf="User" >Saldo {{User.saldo_atual}}</div>
      </div>
      <div class="col s2">
        <a routerLink="feed" class="right"><i class="material-icons color-icon-home link dimensao-icone">home</i></a>
      </div>
      <div class="col s2">
        <div materialize="sideNav" [materializeParams]="[options]" data-activates="slide-out" class="hide-on-large-only"><i class="material-icons grey-text dimensao-icon">menu</i></div>
      </div>
    </div>
  </div>

</nav>

{{User.name}
{{User.nivel | titlecase}
明星
明星
明星
明星
明星
Saldo{{User.Saldo_atual}
家
菜单

我的第二个导航

<nav class="nav-background">
  <div class="nav-wrapper">
    <div class="row valign-wrapper nav2">
      <div class="col s4 espacamento-icone-voltar">
          <div materialize="sideNav" [materializeParams]="[options]" data-activates="slide-out" class="hide-on-large-only"><i class="material-icons grey-text dimensao-icone">keyboard_backspace</i></div> 
      </div>
      <div class="col s4 pull-s1">
        <a routerLink="feed" class="right"><i class="material-icons cor-icone-home link dimensao-icone">home</i></a>
      </div>
      <div class="col s4 espacamento-icone-menu">
        <div materialize="sideNav" [materializeParams]="[options]" data-activates="slide-out" class="hide-on-large-only"><i class="material-icons grey-text dimensao-icone alinha-direita">menu</i></div>
      </div>
    </div>
  </div>
</nav>

键盘退格
家
菜单

---

两者都在同一个html文件中。

您可以定义一个布尔变量，并根据当前页面的Y位置显示一个或另一个标题

要了解页面的当前Y位置，请尝试以下操作：

import { HostListener, Component, OnInit } from '@angular/core';
import { DOCUMENT } from '@angular/platform-browser';
declare const window: any;

export class YourComponent { 

showFullHeader = true;
constructor() {}

@HostListener("window:scroll", [])
onWindowScroll() {

    const yPosition = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
    if (yPosition > 300) {
      showFullHeader = false;
    } else {
        showFullHeader = true;
    }

  }
}

---

以阿尔瓦罗为例，我做了一些小改动

@HostListener("window:scroll", [])
  onWindowScroll(e) {

    const posicaoY = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
    if (posicaoY > 90) {
      let element = document.getElementById('nav-second');
      element.classList.add('show-nav');
    } else {
     let element = document.getElementById('nav-second');
       element.classList.remove('show-nav'); 
    }
  }

Css

HTML中的小变化

<nav class="nav-background" id="">
  <div class="nav-wrapper">
    <div class="row valign-wrapper">
      <div class="valign col s2">
        <a routerLink="profile"><img class="circle header img-custom" src="{{User.foto}}" *ngIf="User"></a>
      </div>
      <div class="col s6 conteudo-header">
        <div class="col s12 nome-header" *ngIf="User">{{User.apelido}}</div>
        <div class="row">
          <div class=" nivel-header" *ngIf="User">
            {{User.nivel | titlecase}}
          </div>
          <div class=" estrelas" *ngIf="User">
            <i class="material-icons  estrela estrela-semcor" [ngClass]="{'estrela-comcor': checkNivel(1)}">star</i>
            <i class="material-icons  estrela estrela-semcor" [ngClass]="{'estrela-comcor': checkNivel(2)}">star</i>
            <i class="material-icons  estrela estrela-semcor" [ngClass]="{'estrela-comcor': checkNivel(3)}">star</i>
            <i class="material-icons  estrela estrela-semcor" [ngClass]="{'estrela-comcor': checkNivel(4)}">star</i>
            <i class="material-icons  estrela estrela-semcor" [ngClass]="{'estrela-comcor': checkNivel(5)}">star</i>
          </div>
        </div>

        <div class=" col s12 saldo-header"*ngIf="User" >Saldo {{User.saldo_atual}}</div>
      </div>
      <div class="col s2">
        <a routerLink="feed" class="right"><i class="material-icons cor-icone-home link dimensao-icone">home</i></a>
      </div>
      <div class="col s2">
        <div materialize="sideNav" [materializeParams]="[options]" data-activates="slide-out" class="hide-on-large-only"><i class="material-icons grey-text dimensao-icone">menu</i></div>
      </div>
    </div>
  </div>
</nav>
 <!--Nav 2-->
  <div class="row valign-wrapper nav2" id="nav-second">
    <div class="col s4">
      <div materialize="sideNav" [materializeParams]="[options]" data-activates="slide-out" class="hide-on-large-only"><i class="material-icons grey-text dimensao-icone">keyboard_backspace</i></div> 
    </div>
    <div class="col s4 pull-s1">
      <a routerLink="feed" class="right"><i class="material-icons cor-icone-home link dimensao-icone">home</i></a>
    </div>
    <div class="col s4">
      <div materialize="sideNav" [materializeParams]="[options]" data-activates="slide-out" class="hide-on-large-only"><i class="material-icons grey-text dimensao-icone">menu</i></div>
    </div>
  </div>

{{User.apelido}
{{User.nivel | titlecase}
明星
明星
明星
明星
明星
Saldo{{User.Saldo_atual}
家
菜单
键盘退格
家
菜单

<nav class="nav-background" id="">
  <div class="nav-wrapper">
    <div class="row valign-wrapper">
      <div class="valign col s2">
        <a routerLink="profile"><img class="circle header img-custom" src="{{User.foto}}" *ngIf="User"></a>
      </div>
      <div class="col s6 conteudo-header">
        <div class="col s12 nome-header" *ngIf="User">{{User.apelido}}</div>
        <div class="row">
          <div class=" nivel-header" *ngIf="User">
            {{User.nivel | titlecase}}
          </div>
          <div class=" estrelas" *ngIf="User">
            <i class="material-icons  estrela estrela-semcor" [ngClass]="{'estrela-comcor': checkNivel(1)}">star</i>
            <i class="material-icons  estrela estrela-semcor" [ngClass]="{'estrela-comcor': checkNivel(2)}">star</i>
            <i class="material-icons  estrela estrela-semcor" [ngClass]="{'estrela-comcor': checkNivel(3)}">star</i>
            <i class="material-icons  estrela estrela-semcor" [ngClass]="{'estrela-comcor': checkNivel(4)}">star</i>
            <i class="material-icons  estrela estrela-semcor" [ngClass]="{'estrela-comcor': checkNivel(5)}">star</i>
          </div>
        </div>

        <div class=" col s12 saldo-header"*ngIf="User" >Saldo {{User.saldo_atual}}</div>
      </div>
      <div class="col s2">
        <a routerLink="feed" class="right"><i class="material-icons cor-icone-home link dimensao-icone">home</i></a>
      </div>
      <div class="col s2">
        <div materialize="sideNav" [materializeParams]="[options]" data-activates="slide-out" class="hide-on-large-only"><i class="material-icons grey-text dimensao-icone">menu</i></div>
      </div>
    </div>
  </div>
</nav>
 <!--Nav 2-->
  <div class="row valign-wrapper nav2" id="nav-second">
    <div class="col s4">
      <div materialize="sideNav" [materializeParams]="[options]" data-activates="slide-out" class="hide-on-large-only"><i class="material-icons grey-text dimensao-icone">keyboard_backspace</i></div> 
    </div>
    <div class="col s4 pull-s1">
      <a routerLink="feed" class="right"><i class="material-icons cor-icone-home link dimensao-icone">home</i></a>
    </div>
    <div class="col s4">
      <div materialize="sideNav" [materializeParams]="[options]" data-activates="slide-out" class="hide-on-large-only"><i class="material-icons grey-text dimensao-icone">menu</i></div>
    </div>
  </div>