Question

当我向下滚动到部分时，我想向元素添加类.active。我有两个部分，我在点击时添加了有效的课程，href="#o-nas正在将我转移到<section id="o-nas">...</section>。我想向下滚动页面并根据滚动位置更改课程。

如何使用Angular 6做到这一点？

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container">
    <a class="navbar-brand d-flex align-items-center" (click)="goToTop()" routerLink="/">
      <img src="assets/logo_studio.png">
    </a>

    <div class="collapse float-right">
      <ul class="navbar-nav">
        <li class="nav-item" [class.active]="router.url == '/'">
          <a class="nav-link d-flex align-items-center"  (click)="goToTop()"  (mouseenter)="hover[0] = true" (mouseleave)="hover[0] = false" [class.active]="hover[0] && router.url !== '/'" routerLink="/">
            <i class="fas fa-home"></i>
            Strona główna
          </a>
        </li>
        <li class="nav-item" [class.active]="router.url == '/#o-nas'" *ngIf="router.url !== '/video' && router.url !== '/galeria'">
          <a class="nav-link d-flex align-items-center" (mouseenter)="hover[1] = true" (mouseleave)="hover[1] = false" [class.active]="hover[1] && router.url !== '/#o-nas'"  href="#o-nas">
            O Nas
          </a>
        </li>
        <li class="nav-item" [class.active]="router.url == '/#kontakt'" *ngIf="router.url !== '/video' && router.url !== '/galeria'">
          <a class="nav-link d-flex align-items-center" (mouseenter)="hover[2] = true" (mouseleave)="hover[2] = false" [class.active]="hover[2] && router.url !== '/#kontakt' " href="#kontakt">
            Kontakt
          </a>
        </li>
        <li class="nav-item" [class.active]="router.url == '/galeria'">
          <a class="nav-link d-flex align-items-center" (mouseenter)="hover[3] = true" (mouseleave)="hover[3] = false" [class.active]="hover[3] && router.url !== '/galeria'" routerLink="/galeria">Galeria</a>
        </li>

        <li class="nav-item" [class.active]="router.url == '/video'">
          <a class="nav-link d-flex align-items-center" (mouseenter)="hover[4] = true" (mouseleave)="hover[4] = false" [class.active]="hover[4] && router.url !== '/video'" routerLink="/video">Video</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Answer 1

如果要根据滚动页面更改所选颜色，可以将滚动与部分位置进行比较。

我刚刚做了一个例子。看一下这个。 https://stackblitz.com/edit/scroll-active-scroll

Angular 6 - 在遇到部分时添加类

1 个答案: