javascript - 为什么 Bootstrap 词缀会跳到顶部

Question

我发现当到达页面底部然后稍微向上滚动时..附加的侧边栏将跳回顶部并再次变为静态。

请查看演示:jsFiddle .

HTML:

<div class="container">
    <div class="row">
        <div class="col-xs-8">

            <div id="1" class="test-div">
                <h2>Header</h2>
            </div>
            <div id="2" class="test-div">
                <h2>Header</h2>
            </div>
            <div id="3" class="test-div">
                <h2>Header</h2>
            </div>
            <div id="4" class="test-div">
                <h2>Header</h2>
            </div>
            <div id="5" class="test-div">
                <h2>Header</h2>
            </div>
            <div id="6" class="test-div">
                <h2>Header</h2>
            </div>
            <div id="7" class="test-div">
                <h2>Header</h2>
            </div>

        </div>

        <div class="col-xs-4">
            <div data-spy="affix" data-offset-top="60" data-offset-bottom="400" class="submenu">
              sub menu will go here<br>
              sub menu will go here<br>
              sub menu will go here<br>
              sub menu will go here<br>
              sub menu will go here<br>
              sub menu will go here<br>
              sub menu will go here<br>
              sub menu will go here<br>
              sub menu will go here<br>
              sub menu will go here<br>
              sub menu will go here<br>
              sub menu will go here<br>
              sub menu will go here<br>
              sub menu will go here<br>
              sub menu will go here<br>
              sub menu will go here<br>
              sub menu will go here<br>
              sub menu will go here<br>
              sub menu will go here<br>
              sub menu will go here<br>
              sub menu will go here<br>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-xs-12 footer">Footer</div>
    </div>
</div>

CSS:

body {
    padding-top: 200px;
}
.test-div {
    min-height: 400px;
    border: 1px solid #D1D1D1;
    margin-bottom: 10px;
}
.footer {
    border: 1px solid red;
    height: 500px;
}

Answer 1

如果您使用的是 data-offset-bottom，则需要添加适当的 css 类来处理该问题 - 根据 Bootrap 文档:http://getbootstrap.com/javascript/#affix

If a bottom offset is defined, scrolling past it should replace .affix with .affix-bottom. Since offsets are optional, setting one requires you to set the appropriate CSS. In this case, add position: absolute; when necessary. The plugin uses the data attribute or JavaScript option to determine where to position the element from there.

所以如果你添加这个CSS

    .affix-bottom {
        position: absolute;
    }

你会发现它开始工作了。

http://jsfiddle.net/epnfzo4s/2/