Div qui s'affiche pas en premier plan
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 :
Citation:
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:
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:
1
2
3
4
5
6
7
8
| .scroll-up
{
visibility: hidden;
}
.scroll-down
{
visibility: visible;
} |
Typescript :
Code:
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
