title: Change Opacity of an element after page scroll
body: <p>there is a header in my website, it is transparent when user is at the top of website, but I want to change it's opacity to 50% when the user scrolls until a certain height of the page, HOW DO I DO IT ?</p>
  <pre><code>.navbar_outline{
      background-color: yellow;
      border-radius: 50px;
      top: 10px;
      width: 1300px;
      height: 70px;
      position: absolute;
      position: fixed;
      margin-left: 35px;
      opacity: 50%;
  }
  </code></pre>