向下滚动Angular时显示导航栏答案

【问题标题】：Show a navbar when scroll down Angular向下滚动Angular时显示导航栏
【发布时间】：2021-09-05 05:58:55
【问题描述】：

我想在向下滚动时显示一个包含导航栏的 div。知道在页面上我嵌入了一个 power bi 报告 html：

<div class="divNav " (scroll)="onWindowScroll($event)">
...
</div>
<div class="report">
  <iframe  [src]="this.linkReport" frameborder="0" allowFullScreen="true"></iframe>
</div>

css:

other class ...
    .scroll-down
    {
      visibility: visible;
    }

ts：

@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;
      }
    })

}

【问题讨论】：

.divNav 的 CSS 是什么样的？
.divNav { 对齐：左；位置：绝对；字体系列：Din； z指数：5； }

标签： css angular typescript navbar

【解决方案1】：

我认为 HostListener 已经是事件处理程序。我认为目前您每次触发滚动事件时都添加一个事件监听器？试试：

@HostListener('window:scroll', ['$event'])
  onWindowScroll($event) {
    const currentScroll = window.pageYOffset;
      if (currentScroll > 100) {
        let menu = document.querySelector(".divNav");
        menu.classList.add("scroll-down");
      }
    })

【讨论】：

我更新了我的代码，就像你告诉我的那样。它不起作用
嗯有时 pageYOffset 不是你想要的。也许试试这个： const verticalOffset = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;看看：stackoverflow.com/questions/41304968/…
我已经尝试过本次讨论中提出的解决方案，但没有奏效。我在 power bi 报告中滚动而不是正常页面这一事实没有影响？
嗯，如果您实际上是在 iframe 内滚动，我认为由于沙箱，它没有机会使其工作。但我只确定你不应该得到任何滚动事件？你有没有在 onWindowScroll 中 console.log ？
对不起，我的回答迟了。我已经被这个话题阻止了。在控制台中我收到了这样的消息：这个站点似乎使用了与滚动相关的定位效果。此效果可能不适用于异步滚动。有关更多详细信息或讨论相关工具和功能，请参阅developer.mozilla.org/docs/Mozilla/Performance/…。