bootstrap affix问题

Question

想实现一个效果，滚动页面一段距离后，页面右下角出现工具条（包含滚动到顶部），当滚动到最底部快接触到footer时，工具条的位置又刚好偏移到footer区域上方

用bootstrap affix勉强实现了下，发现这个插件有问题

实现效果 http://fiddle.jshell.net/deathfang/Z3e75/show/

失败情况 http://fiddle.jshell.net/deathfang/PCdp8/show/

根据affix.js http://twbs.github.io/bootstrap/js/affix.js 源码，

Affix.prototype.checkPosition = function () {
    if (!this.$element.is(':visible')) return

    var scrollHeight = $(document).height()
    var scrollTop    = this.$window.scrollTop()
    var position     = this.$element.offset()
    var offset       = this.options.offset
    var offsetTop    = offset.top
    var offsetBottom = offset.bottom

    if (typeof offset != 'object')         offsetBottom = offsetTop = offset
    if (typeof offsetTop == 'function')    offsetTop    = offset.top()
    if (typeof offsetBottom == 'function') offsetBottom = offset.bottom()

    var affix = this.unpin   != null && (scrollTop + this.unpin <= position.top) ? false :
                offsetBottom != null && (position.top + this.$element.height() >= scrollHeight - offsetBottom) ? 'bottom' :
                offsetTop    != null && (scrollTop <= offsetTop) ? 'top' : false

    if (this.affixed === affix) return
    if (this.unpin) this.$element.css('top', '')

    this.affixed = affix
    this.unpin   = affix == 'bottom' ? position.top - scrollTop : null

    this.$element.removeClass(Affix.RESET).addClass('affix' + (affix ? '-' + affix : ''))

    if (affix == 'bottom') {
      this.$element.offset({ top: scrollHeight - offsetBottom - this.$element.height() })
    }
  }

失败的例子原因是

position.top + this.$element.height() >= scrollHeight - offsetBottom 

position.top就是 $element初始的位置，第一个实现效果我就把 $element放到DOM结构比较靠前的位置让页面初次加载时 这条判断不成立，之后affix affix-bottom这2个class就可以正常切换
不过这样解决就不语义化了，请教更好的实现方案

Answer 1

我发现一个很神奇的地方，bootstrap 3.1.1版本 竟然没有affix-bottom 这个class的样式，
第69行“if (this.unpin) this.$element.css('top', '') //,
竟然没有还原定位方式，我添加了"position","static"”之后才正常运行

bootstrap 4.0好像已经放弃了affix