Bootstrap affix does not work when navigating back

Question

I used the Bootstrap assembler to create a fixed position div that behaves similarly to the How to Format and Similar Questions div that appears when you ask a new question in Stackoverflow. It works great when I load a page for the first time, but if I scroll quite far down the page, open it and then return to the page using the back button, the attached div will sometimes be attached in the wrong place, and sometimes fixed positioning will break and it will just return to its normal place in the document.

Is there something wrong with the way I implement the affix?

Document layout ( #engage- attached div). It should not scroll #titleor #footer:

Javascript

$('#engage').affix({
    offset: {
        top: $('#donation-content').offset().top,
        bottom: function () {
            return (this.bottom = $('.footer').outerHeight(true))
        }
    }
});

CSS

#engage.affix {
    position: fixed;
    top: 0;
}

@media(max-width:767px){

   #engage.affix {
    position: static;
    }
}

http://www.bootply.com/pxyz1hsefA. , , , , " ", "". .

Edit: .affix-bottom css - - . , , "", div . , . , .

#engage.affix-bottom {
  position: absolute;
  }

Answer 1

, , , , , , . ( https://github.com/twbs/bootstrap/issues/4647). , -, - .

, :

$('#engage').affix({
    offset: {
        top: $('#donation-content').offset().top
        }
});

, div , , . , , .

Answer 2

- . ( ) , .