title: How to make this code work with the rest?
body: <p>So i am trying to build a scroll indicator using 3 div elements. All code (meaning the 3 div HTML,CSS,JS) seems to work by itself in codepen.io but when i am using Atom with the rest or my project it seems to stop working.</p>
  
  <p>I tried putting the 3 div's first before everything else. All the way to the end. Using other divs as parents but nothing seems to work.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>  window.onscroll = function() {myFunction()};
  
    function myFunction() {
      var winScroll = document.body.scrollTop || 
  document.documentElement.scrollTop;
      var height = document.documentElement.scrollHeight - 
  document.documentElement.clientHeight;
      var scrolled = (winScroll / height) * 100;
      document.getElementById("myBar").style.height = scrolled + "%";
    }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>*{
    padding: 0;
    margin: 0
  }
   /* Global Stylings */
  
  
  
  /* ID and Class Stylings */
  
  #containter {
    width: 100%;
    height: 100vh;
    scroll-behavior: smooth;
    overflow: auto;
    scroll-snap-type: y mandatory;
  }
  
  #Landing{
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: ;
    width: 100%;
    height: 100vh;
  }
  
  #projects {
    background-color: ;
    width: 100%;
    height: 100vh;
  }
  
  #gallery {
    background-color: ;
    width: 100%;
    height: 100vh;
  }
  
  #logo{
    width: 30em;
    height: 30em;
  }
  
  .scroll {
    scroll-snap-align: start;
  }
  
  .scrollindicator {
    position: fixed;
    top: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    background-color: #f1f1f1;
  }
  
  .progress-container {
    width: 8px;
    height: 100%;
    background: #ccc;
  }
  
  /* The progress bar (scroll indicator) */
  .progress-bar {
    height: 0%;
    background: #4caf50;
    width: 8px;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="containter" class="snap"&gt;
        &lt;div class="progress-container"&gt;
          &lt;div class="progress-bar" id="myBar"&gt;&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
        &lt;div id="Landing" class="scroll"&gt;
          &lt;img id="logo" src="AC-Logo.png" alt="Logo"&gt;
       &lt;/div&gt;
        &lt;div id="projects" class="scroll"&gt;
        &lt;/div&gt;
        &lt;div id="gallery" class="scroll"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;script src="scroll.js"&gt;
      &lt;/script&gt;
    &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The div ID= myBar should show a progress of scrolling throughout the whole page and should be visible at all times.</p>