Bootstrap侧边栏词缀在滚动时闪烁

Posted 2023-03-06

【中文标题】Bootstrap侧边栏词缀在滚动时闪烁

【英文标题】：Bootstrap sidebar affix flickering on scroll

【发布时间】：2017-07-09 11:38:30

【问题描述】：

我的目标是固定侧边栏，它开始很好地滚动，但是当它接近页脚时它开始闪烁。 我做错了什么？ 似乎 Bootstrap 尚未决定并不断在#sidebar 上切换.affix-bottom

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】：

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

#sidebar.affix-bottom 
    position: absolute;

【讨论】：

你能在答案中添加更多关于你做了什么的信息吗？

我只是将 id="sidebar" 放在 class="col-md-4" 的 div 上，检查我的答案，我编辑了它。