Je viens d'apprendre à nouveau Angular. J'ai installé AngularCLI et j'essaie d'ajouter une classe sur le défilement de ce que j'avais avant d'utiliser jquery. Dois-je utiliser [ngClass] pour vérifier une variable avec l'emplacement de la fenêtre? J'essaye d'utiliser @HostListener en ce moment.
$(function () { $(document).scroll(function () { $nav.toggleClass('scrolled', $(this).scrollTop() > $nav.height()); }); }); $(function() { $(document).scroll(function() { var x = $(this).scrollTop(); if (x > 3300) { $nav.removeClass('scrolled'); } }); });
3 Réponses :
Vous pouvez faire quelque chose comme ceci -
import { Component, HostListener, Inject } from '@angular/core'; import { DOCUMENT } from '@angular/common'; @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { constructor(@Inject(DOCUMENT) private document: Document) { } @HostListener('window:scroll', []) onWindowScroll() { if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) { document.getElementById('subTitle').classList.add('red'); document.getElementById('paragraph').classList.add('green'); } } name = 'Angular'; }
Voir l'exemple en direct ici: https://stackblitz.com/edit/angular-changeclassonscroll
Vous pouvez utiliser ce code dans la classe
@HostListener('window:scroll', []) onWindowScroll(event: Event) { //set up the div "id=nav" if (document.body.scrollTop > 3300 || document.documentElement.scrollTop > 3300) { document.getElementById('nav').classList.add('scrolled'); } else { document.getElementById('nav').classList.remove('scrolled'); this.innerWidth = 'auto'; } }
Les solutions ci-dessus fonctionnent, mais je pense qu'il est plus propre et plus approprié d'utiliser le framework autant que possible.
Fichier TypScript:
<div [ngClass]="{ className: scrolled }"></div>
Html: p>
@Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { scrolled: boolean = false; @HostListener("window:scroll", []) onWindowScroll() { this.scrolled = window.scrollY > 0; } }