title: Changing div/span colour when scrolling past elements?
body: <p>I have a sidebar which pops out when the hamburger is clicked (the CodePen provided is not working with this but its not important for what I'm trying to achieve, it works within my project). </p>
  
  <p>The issue I am having is that my site follows a black and white theme and I am looking to have the span elements change colour to white if they are over a dark section. I've seen a couple of CodePens on this but they are only for scrolling down once rather than changing multiple times, as I have more than one dark section.</p>
  
  <p>I am thinking I will have to incorporate this into my existing JS perhaps, or would I be more efficient creating a new function? I am unsure how to select the span and change its background colour when over a dark element, I think I will need to make up new classes for these such as 'dark' or 'light', but I am struggling with how to compose the function. </p>
  
  <p>In my head I am reading it as 'If the section class = dark then span bg colour should = white, else section class = light then span bg should = black'.</p>
  
  <p>I hope this makes sense, I'm trying to learn JS so this is probably a really simple solution. I understand what I am trying to achieve and the general layout still not confident in writing functions yet, but getting to grips with it! </p>
  
  <p></p>
  
  <pre><code>        &lt;div id="sidebar"&gt;
              &lt;div class="content"&gt;
                  &lt;div class="toggle-btn" onclick="toggleSidebar()"&gt;
  
                      &lt;div class="nav" id="navBar"&gt;
                          &lt;div id="navBtn"&gt;
                             &lt;span&gt;&lt;/span&gt;
                              &lt;span&gt;&lt;/span&gt;
                              &lt;span&gt;&lt;/span&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;ul&gt;
  
  
                      &lt;li&gt;&lt;a href="#about"&gt;
                              &lt;p class="scrollto-aboutus animated fadeInUp"&gt;Home&lt;/p&gt;
                          &lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#overview"&gt;
                              &lt;p class="scrollto-overview animated fadeInUp"&gt;text&lt;/p&gt;
                          &lt;/a&gt;&lt;/li&gt;
  
                  &lt;/ul&gt;
                      &lt;div class="row"&gt;
                          &lt;p&gt;Text&lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
      &lt;/nav&gt;
  &lt;section class="section-black new-section dark"&gt;&lt;/section&gt;
  &lt;section class="section-white new-section light"&gt;&lt;/section&gt;
  </code></pre>
  
  <p>
  </p>
  
  <p>CSS</p>
  
  <pre><code>.nav {
      width: 80px;
      background-color: transparent;
      top: 0;
      z-index: 2000;
  }
  
  #navBtn {
    width: 50px;
    height: 40px;
    position: relative;
    margin: 15px auto;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    cursor: pointer;
  }
  
  #navBtn span {
    display: block;
    position: absolute;
    height: 5px;
    width: 100%;
    background: #000;
    border-radius: 9px;
    opacity: 1;
    left: 0;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
  }
  
  
  #navBtn span:nth-child(1) {
    top: 0px;
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
  }
  
  #navBtn span:nth-child(2) {
    top: 15px;
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
  }
  
  #navBtn span:nth-child(3) {
    top: 30px;
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
  }
  
  
  
  
  /* --- nav after */
  
  
  #sidebar {
      position: fixed;
      width: 300px;
      height: 100vh;
      background: #000;
      left: -300px;
      transition: 0.4s;
      z-index: 1;
  }
  
  #sidebar.active {
      left: 0;
      z-index: 1;
  }
  
  #sidebar a {
      list-style: none;
      color: #fff;
      font-size: 100%;
      text-decoration: none;
      color: #fff;
  }
  
  #sidebar p {
      padding: 20px;
      font-size: 20px;
      text-transform: uppercase;
  }
  
  #sidebar .toggle-btn {
      position: absolute;
      left: 300px;
  }
  
  .section-black { 
    height: 100vh;
    width: 100vw;
    background-color: black;
  }
  
  .section-white { 
    height: 100vh;
    width: 100vw;
    background-color: white;
  }
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>function toggleSidebar() {
      document.getElementById('sidebar').classList.toggle('active');
      var sections = document.querySelectorAll('.new-section'),
          i;
      for (i = 0; i &lt; sections.length; ++i) {
          sections[i].classList.toggle('new_section--active');
      }
  };  
  
  
  $(document).ready(function(){
      $('#navBtn').click(function(){
          $(this).toggleClass('open');
      });
  });
  </code></pre>
  
  <p>Heres a really terrible CodePen example: <a href="https://codepen.io/caitlinmooneyx/pen/oOPGQQ" rel="nofollow noreferrer">https://codepen.io/caitlinmooneyx/pen/oOPGQQ</a> </p>