I am looking to create a dynamic navbar that appears when scrolling down on a page that includes an embedded Power BI report. Here is the HTML structure:
<div class="divNav " (scroll)="onWindowScroll($event)">
...
</div>
<div class="report">
<iframe [src]="this.linkReport" frameborder="0" allowFullScreen="true"></iframe>
</div>
And here is the CSS styling:
other class ...
.scroll-down
{
visibility: visible;
}
Finally, in the TypeScript file, we have the following event listener setup:
@HostListener('window:scroll', ['$event'])
onWindowScroll(e) {
let menu = document.querySelector(".divNav");
let scrollDown = "scroll-down";
window.addEventListener("scroll", () => {
const currentScroll = window.pageYOffset;
if (currentScroll > 100) {
menu.classList.add(scrollDown);
return;
}
})
}