html - Angular 6 bootstrap 4 - 导航栏品牌标志在向下滚动时不会改变

Question

我为 bootstrap 4 添加了我的 angular 6 元素，我创建了导航栏 navbar 运行良好，但我有一些冲突我试图在向下滚动更改导航栏 Logo 时进行更改，但我不知道该怎么做正确地在 Angular 上。任何人都知道如何解决该问题。

谢谢

Stack Blitz code here

头部代码部分

<header class="main_menu home_menu">
  <div class="container">
    <div class="row align-items-center">
      <div class="col-lg-12">
        <nav class="navbar navbar-expand-lg navbar-light">
          <a class="navbar-brand" > <img src="https://www.seeklogo.net/wp-content/uploads/2012/12/apple-logo-eps-logo-vector-400x400.png" style="width:50px;">   </a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button></nav>
      </div></div></div></header>

Answer 1

我创建了 Stackblitz .

我正在监听 scroll 事件并将绑定(bind)到 img 标记添加到 HTML。

TS

export class AppComponent  {
  name = 'Angular';

  logoPath = 'https://via.placeholder.com/150/0000FF/808080?Text=oldLogo'

  ngOnInit() {
    window.addEventListener("scroll", this.scroll, true); //third parameter
  }

  scroll = () => {
    const scrollPos = document.documentElement.scrollTop;

    // change '50' according to when you want to change the image
    if (scrollPos > 50) {
      console.log('New image');
      this.logoPath = 'https://via.placeholder.com/150/FF00FF/808080?Text=newLogo';
    }
    else {
      console.log('Old Image');
      this.logoPath = 'https://via.placeholder.com/150/0000FF/808080?Text=oldLogo';
    }

  };
}

HTML

<nav class="navbar navbar-expand-lg navbar-light fixed-top">
          <a class="navbar-brand" > <img [src]="logoPath" ...