title: position:sticky : Adding style when the element detaches from normal flow
body: <p>Let's take take a simple example:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;nav id="#mynav"&gt;MY NAVBAR&lt;/nav&gt;
  </code></pre>
  
  <p>and a basic style:</p>
  
  <pre class="lang-css prettyprint-override"><code>#mynav {
      position : sticky;
  }
  </code></pre>
  
  <p>I would like to apply the following styling information to my navbar <strong>only</strong> when it detaches from the normal flow, in order to visually split it from the main content (with a shadow in this case)</p>
  
  <pre class="lang-css prettyprint-override"><code>box-shadow : 0px 10px 15px 0px rgba(0,0,0,0.75);
  </code></pre>
  
  <p>Is there some kind of pseudo-class or media-query-like thing I could use for that? E.g.:</p>
  
  <pre class="lang-css prettyprint-override"><code>#mynav:some-pseudo-class {
      box-shadow : 0px 10px 15px 0px rgba(0,0,0,0.75);
  }
  </code></pre>
  
  <p>I know there are good plugins for this, but all of them seem to be unable to implement it whithout bypassing the (quite new) native feature <code>position:sticky</code>. Instead, they do it in an old-fashion way (scroll event, and <code>position:fixed; top:0</code>).</p>
  
  <p>So, is it possible to do it using <code>position:sticky</code>, and without using the <code>scroll</code> event, which slows down the fluidity of the page (I'm not against javascript, but scroll event is too slow)?</p>