title: How to make a scrolling image that becomes sticky
body: <p>I have a Bootstrap navigation bar that is fixed in position and has a transparent background. Let's say it's 80px tall. Then in the body of my document I have an <code>img</code> that's around 1000px tall (the image is just set to width 100%). So what I want to happen is when the user scrolls up, the image scrolls up as it should, but then when it hits the point that only 80px of the image is showing, the image becomes fixed in position and remains the background of the navigation bar.</p>
  
  <p>I'm not sure if it would be better to keep my current code:</p>
  
  <pre><code>&lt;nav&gt;
  
  &lt;/nav&gt;
  &lt;img&gt;
  </code></pre>
  
  <p>Or if it would be better to make the navigation bar really tall with the image as a background and shrink the navigation bar and change the image offset as the scroll occurs.</p>