如何从滚动停止bootstrap词缀？

Question

我正在尝试使用bootstrap affix插件，并且无法弄清楚如何使其滚动，这是我正在尝试做的一个例子。 http://www.bootply.com/F6daY1KXoJ

我尝试使用此处描述的技术：http://codepen.io/henrylfan/pen/HBnrJ但是在引用与附加项目不在同一父级中的“底部”时它不起作用。

//select a referenced box for bottom alignment
var bottomReferenceBox = $('.reference-box');

//calculate the bottom position
var bottomOffLine = $(document).height() - bottomReferenceBox.offset().top -       bottomReferenceBox.outerHeight();

$('.affix').affix({
  offset: {
    top: 100,
    bottom: bottomOffLine
  }
})