title: Event of reaching the edge of window in correct way (onscroll)
body: <p>Just in case, its my 1th question.</p>
  <p>I have:
  nav menu with transparent background and trying to change backrgound when  reached top edge of window.</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.addEventListener("scroll", navSticky);
  function navSticky(){
    let nav = document.getElementById('navbar');
    let bounding = nav.getBoundingClientRect();
  
    if(bounding.top &lt;= 0 ){
        nav.classList.add("sticky");
    }else{
        nav.classList.remove("sticky");
    }
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>*{
    margin: 0;
    text-align: center;
  }
  
  body{
    background: lightgrey;
  }
  
  header h1{
    padding: 40px;
  }
  
  nav{
    position: sticky;
    top: 0;
    padding: 12px;
    background: linear-gradient(to right, 
    rgba(0,0,0,0),
    rgba(0,255,0, 0.5), 
    rgba(255,0,0, 0.5),
    rgba(0,0,0,0));
    color: black;
  }
  
  nav:before{
    content: "now bg transparent";
  }
  
  .container{
    min-height: 1000px;
    padding: 20px;
  }
  
  nav.sticky{
    background: linear-gradient(to right, 
    rgb(0,255,0), 
    rgb(255,0,0));
    color: white;
  }
  
  nav.sticky:before{
    content: "now bg isn't transparent";
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
    &lt;header&gt;
      &lt;h1&gt;Header, that ask u to scroll page&lt;/h1&gt; 
    &lt;/header&gt;
    &lt;nav id="navbar"&gt;
    &lt;/nav&gt;
    &lt;div class ="container"&gt;
        When we scroll page, and nav reached top of screen, .sticky add to classList&lt;br&gt;
    &lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Its work, but I have several questions:</p>
  <ol>
  <li>is it possible to do same without js?</li>
  <li>is it possible to optimise this script cuz scroll event calling so often..</li>
  </ol>
  <p>Thank you!</p>