title: Remove sticky header after scrolling to some point
body: <p>I want to remove the sticky <code>css</code> from the header after it reaches 300px from top but with <code>css</code> I am unable to do so and I have 0 <code>jquery</code> knowledge. </p>
  
  <p>Is it possible from css alone?</p>
  
  <p>Here's my <a href="https://jsfiddle.net/rahulxdd/uy11f99k/" rel="nofollow noreferrer">sample code</a></p>