[英]Change the navbar content when scrolling without jquery (Header Sticky on Scroll)?
How do I change the navbar content when scrolling?滚动时如何更改导航栏内容? Without jquery没有jquery
This is my code navbar with angular, but I believe the solution can be made with vanilla js.这是我的带有角度的代码导航栏,但我相信解决方案可以用 vanilla 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>
My second nav我的第二个导航
<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>
Both are in the same html file.两者都在同一个html文件中。
You could define a boolean var and show one header or another based in the Y position of your current page.您可以定义一个布尔变量并根据当前页面的 Y 位置显示一个或另一个标题。
To know the current Y position of your page, try the following:要了解页面的当前 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;
}
}
}
Following the example of alvaro, I made small changes按照alvaro的例子,我做了一些小改动
@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 css
.nav2{
margin-bottom: 0px;
position: sticky;
top:0;
z-index: 999;
background-color: #EBE6DF;
display: none;
}
.show-nav{
display: block;
}
Small changes in HTML 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.