Discussion :

[dibax10]

Bonjour,

J'ai deux div une avec une navbar et une autre ou j'ai mis un iframe avec mon rapport power bi je souhaite afficher le navbar quand je scrolle vers le bas j'ai ce message dans la console du navigateur :

Ce site semble utiliser un effet de positionnement lié au défilement. Cet effet pourrait ne pas fonctionner correctement avec le défilement asynchrone. Consultez https://developer.mozilla.org/docs/M...lLinkedEffects pour obtenir davantage de détails ou discuter des outils et des fonctionnalités liés.

Voila mon code :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="divNav scroll-up" >
  <table class="header1" cellspacing="0" cellpadding="0">
    <tr>
      <td colspan="2" style="text-align:center"><span class="spanHeader1"><img id="logo2" src="assets\icons\poupee1.png"></span></td>
      <td colspan="2" style="text-align:center"><hr class="leftLine"><span class="spanHeader1">Overview</span> <hr ></td>
      <td colspan="2" style="text-align:center"><span class="spanHeader1">Daily</span><hr></td>
      <td colspan="2" style="text-align:center"><span class="spanHeader1">Dash Quanti</span><hr ></td>
</tr>
</table>
</div>
 
<div class="report" >
  <iframe (scroll)="onWindowScroll($event);" [src]="this.linkReport" frameborder="0" allowFullScreen="true"></iframe>
</div>

CSS :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
.scroll-up
{
  visibility: hidden;
}
.scroll-down
{
  visibility: visible;
}

Typescript :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
@HostListener('scroll', ['$event'])
  onWindowScroll(e) {
  if (window.scrollY >20) {
      let menu = document.querySelector(".divNav");
      menu.classList.add("scroll-down");
      menu.classList.remove("scroll-up");
      console.log("ok")
    }
  }

Merci pour votre aide

[NoSmoking]

Bonjour,
ce message ne constitue qu'un avertissement et non une erreur, ceci mis à part je n'ai pas saisie ton soucis !

[dibax10]

Bonjour,

Mon soucis c'est que mon div qui contient le navbar ne s'affiche pas quand je défile vers le bas

[NoSmoking]

Certes tu rends ton élément visible, mais comme tu as scrollé la page il se trouve hors de la page, en haut, essaies de le mettre aussi en position:fixed pour qu'il reste en position haute.

[dibax10]

Bonsoir,

J'ai fais ce que tu m'as dit et ca marche pas. J'ai consulté la console du navigateur car j'ai mis un message dans ma fonction et le message ne s'affiche pas non plus. Je pense qu'il y'a un problème au niveau de la fonction ou l'emplacement ou je l'appelle en html non?

[NoSmoking]

J'ai fais ce que tu m'as dit et ca marche pas.

effectivement, je n'avais pas vu que tu avais mis l'événement sur l'<iframe>, donc ton document.querySelector(".divNav") est sur la page parent.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
const parentIframe = window.parent.frames;
const menu = parentIframe.document.querySelector(".divNav");

ou quelque chose d'approchant.

Le code est contenu dans quelle page, parent ou iframe ?