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

如果定义了底部偏移量，滚动它应该替换.affix 与.affix-bottom。由于偏移是可选的，因此需要设置偏移你要设置合适的CSS。在这种情况下，添加position：absolute; 必要时。该插件使用数据属性或JavaScript 选项以确定从那里放置元素的位置。

所以如果你添加这个css

    .affix-bottom {
        position: absolute;
    }

你会发现它开始工作了。

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

为什么bootstrap词缀跳到顶部

1 个答案: