jquery - 使用 Bootstrap 3 滚动 Div 的解决方案是什么

Question

我试图粘贴一个 div 并垂直滚动它。但问题是当我开始滚动时，div 变小，插入的图片描述了这一切。

请引用图像“before_scroll”和“after_scroll”以了解问题。下面是我的 HTMl 和 JS 代码:

HTML:
<div id="my-affix" data-spy="affix" data-offset-top="60" data-offset-bottom="200" class="affix fixed-top">
    <div class="container-fluid header">
        <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <img class="img-responsive logo" src="image/logo.png" alt="" />
            </div>  
        </div>
    </div>  
</div>

JS:

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

图片: https://dl.dropboxusercontent.com/u/80495844/after_scroll.jpg https://dl.dropboxusercontent.com/u/80495844/before_scroll.jpg

Answer 1

当您在滚动上切换类/样式并变为 position:fixed 或 position:absolute 时，固定/绝对元素需要一个大小或位置。

   #my-affix {left:0;right:0;} /* example only */

了解更多:http://learnlayout.com/position.html