在滚动上触发活动类,不带Jquery的Angular 5

时间:2017-12-12 16:43:11

标签: javascript angular angular5

我需要有关在我的应用程序中滚动时如何触发添加类而不使用jQuery的说明。

我有这种结构的侧边菜单

<div class="menu">
  <div class="menu-item">
    <div class="line"></div>
    <span class="home">Home</span>
  </div>
  <div class="menu-item">
    <div class="line"></div>
    <span class="other">Venture Creation</span>
  </div>
  <div class="menu-item">
    <div class="line"></div>
    <span class="other">Product Studio</span>
  </div>
  <div class="menu-item">
    <div class="line"></div>
    <span class="other">Portfolio</span>
  </div>
  <div class="menu-item">
    <div class="line"></div>
    <span class="other">what i do</span>
  </div>
  <div class="menu-item">
    <div class="line"></div>
    <span class="other">Stay in Touch</span>
  </div>
</div>

我有六个部分,高度为100vh,当我滚动特定部分时,我需要触发活动类,所以当我在部分(例如)投资组合我的活动类开启时:

 <div class="menu-item">
    <div class="line"></div>
    <span class="other">Portfolio</span>
  </div>

我的问题与另一个问题有关,当我进入特定部分时,我还需要触发其他一些事件。想法是我在背景上触发动画,以便我可以在此网页上获得效果:https://sonikpass.com/

我有这样的结构:

<div class="global-background">
 <div class="top-part">
  <img class="img-one-top" src="../assets/images/brain1-01.svg" alt="" />
  <img class="img-two-top" src="../assets/images/whoiam1-01.svg" alt="" />
  <img class="img-three-top" src="../assets/images/whatidid1-01.svg" alt="" />
  <img class="img-four-top" src="../assets/images/whatido1-01.svg" alt="" />
  <img class="img-five-top" src="../assets/images/connect1-01.svg" alt="" />
 </div>
 <div class="bottom-part">
  <img class="img-one-bottom" src="../assets/images/brain2-02.svg" alt="" />
  <img class="img-two-bottom" src="../assets/images/whoiam2-02.svg" alt="" />
  <img class="img-three-bottom" src="../assets/images/whatidid2-02.svg" alt="" />
  <img class="img-four-bottom" src="../assets/images/whatido2-02.svg" alt="" />
  <img class="img-five-bottom" src="../assets/images/connect2-02.svg" alt="" />
 </div>
</div>

我在CSS中为SlidingInLeft和SlidingInRight做了动画,所以我只需要包装这些东西并实现它们。

最佳解决方案是什么?

1 个答案:

答案 0 :(得分:0)

通过聆听 directive 事件,可以使用mousewheel实现此目的,

指令代码

@Directive({
    selector: '[wheel]'
})
export class WheelDirective implements OnInit{
    constructor(
        private renderer: Renderer2,
        private el: ElementRef
    ){}
    ngOnInit(){
      Array.from(this.el.nativeElement.children).forEach((item,index)=>{
        if(index!==0){
          item.classList.add('hidden');
        }
      })
    }

    @HostListener('mousewheel', ['$event']) onMousewheel(event) {
      let parentDiv = event.srcElement.parentElement;
      console.log(parentDiv);
      let childNodes = Array.from(parentDiv.children);
      let currentIndex=-1;
      if(parentDiv && parentDiv.children){
      childNodes.forEach((item,index)=>{
        if(item!==event.srcElement){
          item.classList.add('hidden');  
        }else{
          item.classList.add('hidden');  
          currentIndex = index
        }

      });
      if(currentIndex===(childNodes.length -1)){
        currentIndex=0;
      }
      childNodes[currentIndex+1].classList.remove('hidden');
      }
}

HTML

<div class="top-part" wheel>
  <img class="img-one-top" src="https://lorempixel.com/400/200" alt="" />
  <img class="img-two-top" src="https://lorempixel.com/400/201" alt="" />
  <img class="img-three-top" src="https://lorempixel.com/400/202" alt="" />
  <img class="img-four-top" src="https://lorempixel.com/400/300" alt="" />
  <img class="img-five-top" src="https://lorempixel.com/400/600" alt="" />
</div>

LIVE DEMO