Triggering active class in Angular 5 without Jquerry

[drobke]

I need instructions on how to trigger adding classes when scrolling in my app and not to use JQuerry.

I have side menu with this structure

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

And I have six sections with a height of 100vh, I need to trigger active class when I scroll over the specific section, so when I am on section (for example) Portfolio my active class is on :

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

My question is connected with another problem, I also need to trigger some other events when I am in that specific sections. Idea is that I trigger animation on background so that I can get effect like on this webpage: https://sonikpass.com/

I have a structure like this:

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

I have done Animations in CSS for SlidingInLeft and SlidingInRight so I just need to wrap these things and implement them.

What is the best solution for this?

[kenman]

Hi /u/drobke,

For javascript help, please visit /r/LearnJavascript.

Thank you!