Bootstrap affix issues when document height is dynamic. Using bootstrap.js off of master.

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
    <link rel="stylesheet" href="style.css" />
  
    <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script src="https://rawgit.com/twbs/bootstrap/master/dist/js/bootstrap.js"></script>
    <script src="script.js"></script>
  </head>

  <body>
    <div class="container-fluid">
      <header class="container-header row">
        <div class="col-sm-12">
          HEADER
        </div>
      </header>
      
      <main class="row">
        <div class="col-sm-9 filler-container js-filler-container">
          FILLER
        </div>
        
        <div class="col-sm-3">
          <header class="sticky-top js-sticky-top">
            TOP
            <span class="vertical-helper"></span>
            <button class="js-add-button">+</button>
            <button class="js-subtract-button">-</button>
          </header>
          
          <footer class="sticky-bottom js-sticky-bottom">
            BOTTOM
          </footer>
        </div>
      </main>
      
      <footer class="container-footer row">
        <div class="col-sm-12">
          FOOTER
        </div>
      </footer>
    </div>
  </body>

</html>

$(document).ready(function() {

  var $fillerContainer = $(".js-filler-container");
  
  $(".js-add-button").on("click", function() {
    $fillerContainer.height($fillerContainer.height() + 30);
  });
  
  $(".js-subtract-button").on("click", function() {
    $fillerContainer.height($fillerContainer.height() - 30);
  });

  $(".js-sticky-top").affix({
    offset: {
      top: 300
    }
  });

  $(".js-sticky-bottom").affix({
    offset: {
      bottom: 300
    }
  });

});

.container-header, .container-footer, .filler, .sticky {
  height: 300px;
}

.vertical-helper {
  display: block;
  height: 75%;
}

.filler-container {
  height: 1200px;
}

.sticky-top, .sticky-bottom {
  height : 200px;
}

.sticky-top.affix {
  top: 0px;
}

.sticky-bottom.affix {
  bottom: 0px;
}

.affix-bottom.sticky-bottom {
  position: relative;
}





.container-header {
  background-color: teal;
}

.filler-container {
  background-color: pink;
}

.sticky-top {
  background-color: tomato;
}

.sticky-bottom {
  background-color: lightblue;
}

.container-footer {
  background-color: purple;
}