Je recherche un moyen simple de faire apparaître un en-tête différent lorsque celui normal fait défiler vers le bas. J'ai cherché de nombreuses solutions mais elles impliquent toutes du code long.
Voici donc la solution que j'ai trouvée mais cela ne fonctionne pas car y ne se met pas en œuvre.
est le TypeScript
export class HeaderComponent implements OnInit{
scrolled = 0;
@HostListener('window:scroll', ['$event'])
onWindowScroll($event) {
const numb = window.scrollY;
if (numb >= 50){
this.scrolled = 1;
}
else {
this.scrolled = 0;
}
}
}
Le HTML
<div id="header" *ngIf="scrolled == 0"> ... </div> <div id="header2" *ngIf="scrolled == 1"> ... </div>
Et le .css
.hide {
opacity: 0;
left: -100%;
}
.show {
opacity: 1;
left: 0;
}
3 Réponses :
J'ai mis à jour votre code, essayez ceci.
import { Component, OnInit, HostListener } from '@angular/core';`
...
export class HeaderComponent implements OnInit{
y = window.scrollY;
myID = document.getElementById("header");
myID2 = document.getElementById("header2");
ngOnInit() {}
@HostListener('window:scroll', ['$event'])
onWindowScroll($event) {
if (this.y >= 150) {
this.myID2.className = "bottomMenu hide"
this.myID.className = "bottomMenu show"
} else {
this.myID2.className = "bottomMenu show"
this.myID.className = "bottomMenu hide"
}
}
}
Merci pour votre réponse, je vais travailler sur la solution * ngIf et voir si ça marche en premier!
Si vous utilisez angular et que vous souhaitez masquer certains éléments, vous devez simplement utiliser * ngIF qui rendra ou non l'élément et il n'est pas nécessaire d'appliquer css pour le masquer, et puisque vous êtes seulement montrant 1 élément ou l'autre, vous pouvez simplement lier les deux à la même variable mais avec une condition inverse.
this.scrolled = $event.srcElement.scrollTop / $event.srcElement.scrollHeight > 0.1 ;
Et dans votre composant, tout ce qu'il reste à faire est d'activer le défilement s'il dépasse votre height.
import { Component, OnInit, HostListener } from '@angular/core';`
...
export class HeaderComponent implements OnInit{
scrolled = false;
@HostListener('window:scroll', ['$event'])
onWindowScroll($event) {
this.scrolled = $event.srcElement.scrollTop >= 150;
}
}
Edit: J'ai ajouté la réponse HostListener de upinder kumar car c'est la bonne façon de s'inscrire aux événements en angulaire.
Édition 2: dans le passé, j'ai implémenté quelque chose de similaire, mais je n'ai pas utilisé une taille de px codée en dur (dans votre cas, vous utilisez 150 px) pour faire défiler l'événement, mais à la place, j'ai calculé que mon en-tête changerait après 10% du parchemin a été déplacé avec l'expression suivante:
<div id="header" *ngIf="!scrolled" class="bottomMenu"> ... </div> <div id="header2" *ngIf="scrolled" class="bottomMenu"> ... </div>
Oh merci je n'ai pas pensé à la solution * ngIf ici, j'ai encore des problèmes, j'essaye de les résoudre et je te réponds si ça ne marche toujours pas!
Je pense que l'auditeur ne fonctionne pas, rien ne se passe lorsque je fais défiler vers le bas.
@Skimar Oui, vous devriez utiliser l'approche upinder kumar avec l'approche ngIf, en appliquant plutôt un CSS différent
sans le ngif tu veux dire? Ok je vais essayer sa solution alors
@Skimar Non, vous voulez utiliser le ngIf, car cela n'a toujours aucun sens d'appliquer des css pour masquer des éléments, et vous ne voulez pas le faire via le composant si ce serait le cas que vous appliqueriez via un ngClass. Combinez simplement les deux solutions que je modifierai pour toutes les inclure
Ok merci, je travaille dessus depuis, mais semble toujours ne pas marcher ... Il affiche le premier donc pour ça je pense que c'est ok, le * ngIf fonctionne, mais sur l'auditeur il me dit 2 conseils: "Paramètre '$ event' a implicitement un type 'any', mais un meilleur type peut être déduit de l'usage. " & "'$ event' est déclaré mais sa valeur n'est jamais lue.", dans le onWindowScroll, j'ai même testé avec 10 comme valeur y mais pareil ..
@Skimar vérifie ma modification pour accéder à la valeur de défilement correcte de l'événement
Je suis désolé de ne pas travailler encore .. Le problème est vraiment l'auditeur je pense parce que même quand je mets 1 sur la valeur y, le second que je fais défiler le premier en-tête devrait au moins disparaître, mais il est toujours là .. Peut-il y avoir une importation ou quelque chose que j'aurais pu oublier?
@Skimar J'ai laissé les 150 px parce que je pensais que c'était la valeur que votre élément doit faire défiler si cette valeur doit être dynamique ou une autre, vous pouvez passer de 150 px à autre chose, maintenant cette valeur doit être obtenue du reste de votre code css
150px est la hauteur de l'en-tête, oui
@Skimar ok alors faites un console.log (event) et voyez ce qu'il retourne si vous pouvez naviguer jusqu'à la propriété event.srcElement.scrollTop
merci, apparemment il le voit, je ne trouve aucune valeur sur la console, il montre ceci: Event {isTrusted: true, type: "scroll", target: document, currentTarget: Window, eventPhase: 3,…} bulles: true cancelBubble: false cancellable: false compose: false currentTarget: null defaultPrevented: false eventPhase: 0 isTrusted: true path: (2) [document, Window] returnValue: true srcElement: document target: document timeStamp: 33723.884999984875 type: "scroll" proto : événement
@Skimar a essayé d'utiliser $ event.srcElement.scrollTop?
Continuons cette discussion dans le chat .
HTML
export class HeaderComponent implements OnInit{
scrolled = 0;
@HostListener('window:scroll', ['$event'])
onWindowScroll($event) {
const numb = window.scrollY;
if (numb >= 50){
this.scrolled = 1;
}
else {
this.scrolled = 0;
}
}
}
TypeScript
<div id="header" *ngIf="scrolled == 0"> ... </div> <div id="header2" *ngIf="scrolled == 1"> ... </div>
Plus facile qu'un long auditeur
pouvez-vous fournir votre modèle html complet pour voir quel événement d'élément vous écoutez
Je suppose que je n'ai ceci que dans le .ts: window.addEventListener ("scroll", this.myScrollFunc); ... Je pensais que c'était suffisant pour l'auditeur