Angular

Icons

npm install font-awesome --save

"styles": [
  ...
  "node_modules/font-awesome/css/font-awesome.min.css",
  ...
],

... class="fa fa-user icon" ...

Links

https://fontawesome.com/free

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 = '-50px';
    }

    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

https://angular.io/api/core/HostListener

Links

https://www.w3schools.com/angular/default.asp

Zurück zu JavaScript