向下滚动Angular时显示导航栏

Posted 2023-03-06

【中文标题】向下滚动Angular时显示导航栏

【英文标题】：Show a navbar when scroll down 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；

【参考方案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;看看：***.com/questions/41304968/…

我已经尝试过本次讨论中提出的解决方案，但没有奏效。我在 power bi 报告中滚动而不是正常页面这一事实没有影响？

嗯，如果您实际上是在 iframe 内滚动，我认为由于沙箱，它没有机会使其工作。但我只确定你不应该得到任何滚动事件？你有没有在 onWindowScroll 中 console.log ？

对不起，我的回答迟了。我已经被这个话题阻止了。在控制台中我收到了这样的消息：这个站点似乎使用了与滚动相关的定位效果。此效果可能不适用于异步滚动。有关更多详细信息或讨论相关工具和功能，请参阅developer.mozilla.org/docs/Mozilla/Performance/…。