Question

我为bootstrap 4添加了我的angular 6项目，并创建了导航栏，导航栏工作良好，但是当向下滚动更改导航栏徽标时，我试图更改它，但我遇到了一些冲突，但是我不知道该怎么做正确地放在角上。任何人都知道如何解决该问题。

谢谢

标题代码部分

<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事件，并向HTML的img标签添加了绑定。

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" ...

Angular 6 Bootstrap 4-导航栏品牌徽标在向下滚动中未更改

1 个答案: