title: Change CSS After Scrolling
body: <p>I have a navbar that uses some CSS to change the opacity:</p>
  <pre class="lang-css prettyprint-override"><code>.navbar {
      background-color: #4B5253;
      opacity: 0.8;
      filter: alpha(opacity = 80);
  }
  </code></pre>
  <p>I need the <code>opacity</code> to change to <code>1.0</code> after the user scrolls down a certain number of pixels, for example, <code>500px</code>.</p>
  <p>I'm using jQuery, but I didn't find a solution.</p>
  <p>Also, I'm not good with JavaScript, and sometimes I don't know where should I put my code. So if is there any way to do it all with CSS, it will be great!</p>
  <p><a href="https://hulu.com" rel="nofollow noreferrer">Here is an example of what I want</a>—pay close attention to the header as you scroll down.</p>