title: Triggering active class on scroll, Angular 5 without Jquery
body: <p>I need instructions on how to trigger adding classes when scrolling in my app and not to use jQuery. </p>
  
  <p>I have side menu with this structure</p>
  
  <pre><code>&lt;div class="menu"&gt;
    &lt;div class="menu-item"&gt;
      &lt;div class="line"&gt;&lt;/div&gt;
      &lt;span class="home"&gt;Home&lt;/span&gt;
    &lt;/div&gt;
    &lt;div class="menu-item"&gt;
      &lt;div class="line"&gt;&lt;/div&gt;
      &lt;span class="other"&gt;Venture Creation&lt;/span&gt;
    &lt;/div&gt;
    &lt;div class="menu-item"&gt;
      &lt;div class="line"&gt;&lt;/div&gt;
      &lt;span class="other"&gt;Product Studio&lt;/span&gt;
    &lt;/div&gt;
    &lt;div class="menu-item"&gt;
      &lt;div class="line"&gt;&lt;/div&gt;
      &lt;span class="other"&gt;Portfolio&lt;/span&gt;
    &lt;/div&gt;
    &lt;div class="menu-item"&gt;
      &lt;div class="line"&gt;&lt;/div&gt;
      &lt;span class="other"&gt;what i do&lt;/span&gt;
    &lt;/div&gt;
    &lt;div class="menu-item"&gt;
      &lt;div class="line"&gt;&lt;/div&gt;
      &lt;span class="other"&gt;Stay in Touch&lt;/span&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>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 :</p>
  
  <pre><code> &lt;div class="menu-item"&gt;
      &lt;div class="line"&gt;&lt;/div&gt;
      &lt;span class="other"&gt;Portfolio&lt;/span&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>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 web page: <a href="https://sonikpass.com/" rel="nofollow noreferrer">https://sonikpass.com/</a></p>
  
  <p>I have a structure like this:</p>
  
  <pre><code>&lt;div class="global-background"&gt;
   &lt;div class="top-part"&gt;
    &lt;img class="img-one-top" src="../assets/images/brain1-01.svg" alt="" /&gt;
    &lt;img class="img-two-top" src="../assets/images/whoiam1-01.svg" alt="" /&gt;
    &lt;img class="img-three-top" src="../assets/images/whatidid1-01.svg" alt="" /&gt;
    &lt;img class="img-four-top" src="../assets/images/whatido1-01.svg" alt="" /&gt;
    &lt;img class="img-five-top" src="../assets/images/connect1-01.svg" alt="" /&gt;
   &lt;/div&gt;
   &lt;div class="bottom-part"&gt;
    &lt;img class="img-one-bottom" src="../assets/images/brain2-02.svg" alt="" /&gt;
    &lt;img class="img-two-bottom" src="../assets/images/whoiam2-02.svg" alt="" /&gt;
    &lt;img class="img-three-bottom" src="../assets/images/whatidid2-02.svg" alt="" /&gt;
    &lt;img class="img-four-bottom" src="../assets/images/whatido2-02.svg" alt="" /&gt;
    &lt;img class="img-five-bottom" src="../assets/images/connect2-02.svg" alt="" /&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I have done Animations in CSS for SlidingInLeft and SlidingInRight so I just need to wrap these things and implement them. </p>
  
  <p>What is the best solution for this?</p>