Angular: Unterschied zwischen den Versionen
Zur Navigation springen
Zur Suche springen
| Zeile 28: | Zeile 28: | ||
<pre> | <pre> | ||
prevScrollpos = 0; | |||
... | |||
@HostListener('window:scroll', ['$event']) | @HostListener('window:scroll', ['$event']) | ||
scrollHandler(event) { | scrollHandler(event) { | ||
| Zeile 40: | Zeile 44: | ||
this.prevScrollpos = currentScrollPos; | this.prevScrollpos = currentScrollPos; | ||
} | } | ||
</pre> | |||
<pre> | |||
#nav-bar { | |||
position: fixed; | |||
top: 0; | |||
left: 0; | |||
width: 100%; | |||
display: block; | |||
transition: top 0.5s; | |||
} | |||
</pre> | </pre> | ||
Version vom 5. September 2018, 12:02 Uhr
Icons
npm install font-awesome --save
"styles": [ ... "node_modules/font-awesome/css/font-awesome.min.css", ... ],
... class="fa fa-user icon" ...
Links
Menü beim Scrollen ausblenden
import { ..., HostListener, ... } from '@angular/core';
prevScrollpos = 0;
...
@HostListener('window:scroll', ['$event'])
scrollHandler(event) {
const currentScrollPos = window.pageYOffset;
if ((currentScrollPos < 55) || (this.prevScrollpos > currentScrollPos)) {
document.getElementById('nav-bar').style.top = '0';
} else {
document.getElementById('nav-bar').style.top = '-100px';
}
this.prevScrollpos = currentScrollPos;
}
#nav-bar {
position: fixed;
top: 0;
left: 0;
width: 100%;
display: block;
transition: top 0.5s;
}
Links
https://www.w3schools.com/howto/howto_js_navbar_hide_scroll.asp
Links
https://www.w3schools.com/angular/default.asp
Zurück zu JavaScript