title: Moving Fixed/sticky Menu CSS
body: <p>Looking to create a fixed menu that starts in middle of webpage, but when scrolling down fixes to the top of the page using CSS/HTML.</p>
  
  <p>Is it possible to do this using a container? So the container with the menu starts below a top container and when the top container is scrolled off the page the menu is fixed to the top of that container and the top of the screen?</p>
  
  <p>For example, how can I make it so that the image in the second container stays at the top of the screen when scrolling down the page, but make it stay in the second container:</p>
  
  <p><a href="https://codepen.io/Daggett/pen/mpBaab" rel="nofollow noreferrer">https://codepen.io/Daggett/pen/mpBaab</a></p>
  
  <pre><code>    position: sticky;
      &lt;!--doesn't stick!--&gt;
  </code></pre>
  
  <p>Is there a way to do this only with CSS? I know it can be done with jQuery</p>
  
  <p>Thanks!</p>