title: Bootstrap affix does not work when navigating back
body: <p>I have used Bootstrap affix to create a fixed position div that behaves similar to the "How to Format" and "Similar Questions" div that appears when you ask a new question in Stackoverflow. It works fine when I load the page the first time, but if I scroll quite far down the page, navigate away, and then return to the page with the back button, the affixed div will sometimes be affixed in the wrong place, and sometimes the fixed positioning will break and it will simply return to its normal place in the document.</p>
  
  <p>Is there something wrong with how I am implementing affix?</p>
  
  <p>Document layout (<code>#engage</code> is the affixed div). It should not scroll over <code>#title</code> or <code>#footer</code>:</p>
  
  <p><img src="https://i.stack.imgur.com/F8Xfu.png" alt="enter image description here"></p>
  
  <p><strong>Javascript</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>$('#engage').affix({
      offset: {
          top: $('#donation-content').offset().top,
          bottom: function () {
              return (this.bottom = $('.footer').outerHeight(true))
          }
      }
  });
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre class="lang-css prettyprint-override"><code>#engage.affix {
      position: fixed;
      top: 0;
  }
  
  @media(max-width:767px){
  
     #engage.affix {
      position: static;
      }
  }
  </code></pre>
  
  <p>You can find example code at <a href="http://www.bootply.com/pxyz1hsefA" rel="nofollow noreferrer">http://www.bootply.com/pxyz1hsefA</a>. Errors tend to happen if you scroll to the bottom of the page, click on "Go somewhere else", then click on the back button. Violent scrolling up and down will also tend to break it.</p>
  
  <p><strong>Edit:</strong>
  Adding an <code>.affix-bottom</code> class to the css with absolute positioning goes some way to fixing it. At least now when it's 'broken' the div just sticks to the bottom of its scrolling range. When I scroll back to the top, it resumes it's correct fixed position again. But it's still not what I'd call stable.</p>
  
  <pre class="lang-css prettyprint-override"><code>#engage.affix-bottom {
    position: absolute;
    }
  </code></pre>