Хорошо ... Было нелегко найти четкое название для этой истории, но я думаю, что GIF может возобновить цель этого рассказа.

Если это то, что вы искали, вы попали в нужное место, так что продолжайте! Я дам вам ответ, чтобы создать этот потрясающий эффект, который мы находим повсюду в Интернете, но, к сожалению, с использованием jQuery.

Директива будет такой простой:

import { Directive, ElementRef, HostListener, Input } from '@angular/core';

@Directive({
  selector: '[addAttributeOn]'
})
export class BackgroundFadeInDirective {

  constructor(private element: ElementRef) { }

  @Input() myClassToAdd: string;
  @Input('addAttributeOn') elementIdToReach: string;

  @HostListener('window:scroll', [])
  onWindowScroll() {
    const elementOffsetTop = document.getElementById('toReach').offsetTop;
    if (elementOffsetTop <= window.pageYOffset) {
      this.element.nativeElement.classList.add(this.myClassToAdd);
    } else {
      this.element.nativeElement.classList.remove(this.myClassToAdd);
    }
  }

}

Директива состоит из двух входов:

  • elementIdToReach: это идентификатор элемента DOM, который вы хотите, чтобы Директива добавляла второй вход, который:
  • myClassToAdd: имя класса, который вы хотите добавить / удалить из элемента, реализующего Директиву.

Обновление: если вы хотите добавить класс, когда нижняя часть вашего элемента достигнет верха следующего элемента, просто используйте this.element.nativeElement.offsetHeight, чтобы суммировать его с window.pageYOffset.

Возможно, мои имена директив или атрибутов недостаточно ясны для вас, просто измените их, но все это находится внутри «@HostListener». (Не забудьте добавить директиву в массив объявлений вашего модуля)

Теперь давайте посмотрим на HTML-реализацию директивы:

<nav [addAttributeOn]='"toReach"' myClassToAdd="background">
Your nav links
</nav>

Все это! Только два входа, как явно написано в Директиве:

  • [addAttributeOn] = ’” elementIdToReach ”’: здесь вы вставите идентификатор, обратите внимание, что вам нужны двойные кавычки, поскольку мы не используем переменную компонента.
  • myClassToAdd = ”yourclass”: имя класса, который вы хотите добавить / удалить с указанным выше идентификатором.

Теперь нам просто нужен CSS с атрибутом transform, чтобы обработать эффект постепенного появления / исчезновения.

nav.background {
  background-color: rgba(brown, 0.9);
}

nav {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: transparent;
  -webkit-transition: background .5s;
  -moz-transition: background .5s;
  -ms-transition: background .5s;
  -o-transition: background .5s;
  transition: background .5s;

Вот ваш потрясающий эффект, когда вы достигаете определенного элемента на Angular 4 без использования jQuery!

Я хотел сделать эту Директиву как можно более простой, вы, конечно, можете добавить атрибут перехода непосредственно внутри Директивы, добавить новый атрибут для цвета в качестве ввода и т. Д.

Надеюсь, это поможет некоторым изучающим Angular, таким как я, через Интернет :) повеселиться.