Bootstrap侧边栏在滚动条上闪烁

时间:2017-02-20 09:09:18

标签: jquery html css twitter-bootstrap

我的目标是固定侧边栏,它开始滚动得很好但是当它靠近页脚时它会开始闪烁。 我做错了什么? 似乎Bootstrap尚未确定,并且在.affix-bottom上继续切换#sidebar

http://codepen.io/anon/pen/MJMQMr

JS

var $sidebar = jQuery('#sidebar');

jQuery($sidebar).affix({
  offset: {
    top: $sidebar.offset().top,
    bottom: function() {
      return (this.bottom = jQuery('#footer').outerHeight(true))
    }
  }
})

CSS

.affix {
  top: 0;
}

.affix-bottom {
  position: absolute;
  top: auto;
  bottom: 20px;
}

HTML

<div class="container">

  <div class="header">
      <!-- HEADER -->
  </div>

  <div class="row">
    <div class="content col-md-8">
        <!-- CONTENT -->
    </div>

    <div class="col-md-4">
      <div id="sidebar">
        <!-- AFFIXED -->
      </div>
    </div>

  </div>

  <div id="footer">
        <!-- FOOTER -->
  </div>

</div>

1 个答案:

答案 0 :(得分:-1)

我现在更新了代码检查:codepen.io

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