DEMO

Question

我正在尝试在左栏中制作固定菜单，但在我的情况下，词缀插件很奇怪：http://jsfiddle.net/AlexeyKosov/753ofx5x/ 尝试滚动到底部和背面，当您向后滚动时，菜单会跳到顶部。我做错了什么？

HTML：

<body>
    <div class="container">
        <div class="row">
            <div class="col-xs-3">
                <div class="panel panel-default menu">
                    <div class="list-group">
                        <a class="list-group-item" href="#">Item 1</a>
                        <a class="list-group-item" href="#">Item 2</a>
                        <a class="list-group-item" href="#">Item 3</a>
                        <a class="list-group-item" href="#">Item 4</a>
                    </div>
                </div>          
            </div>
            <div class="col-xs-9">
                <div class="content">
                </div>
            </div>
        </div>
    </div>
    <div class="footer">
        footer
    </div>
</body>

CSS：

body {
    padding-top: 20px;
}
.content {
    height: 1000px;
}
.footer {
    background: #eee; 
    height: 1000px;
}
.menu {
    width: 250px;
}

JS：

$(function() {
    $('.menu').affix({
        offset: {
            top: 100,
            bottom: 1000
        }
    });
});

Answer 1

只需使用affix：

避免脚本

在bootstrap中，有一个名为affix的内置类，它由以下css组成：

.affix {
    position: fixed;
    -webkit-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0px, 0px, 0px);
}

DEMO

HTML：

<div class="container">
        <div class="row">
            <div class="col-xs-3">
                <div class="panel panel-default menu affix">
                    <div class="list-group">
                        <a class="list-group-item" href="#">Item 1</a>
                        <a class="list-group-item" href="#">Item 2</a>
                        <a class="list-group-item" href="#">Item 3</a>
                        <a class="list-group-item" href="#">Item 4</a>
                    </div>
                </div>          
            </div>
            <div class="col-xs-9">
                <div class="content">
                </div>
            </div>
        </div>
    </div>
    <div class="footer">
        footer
    </div>

Answer 2

我只需要添加

.affix-bottom {
    position: absolute;
}

Twitter Bootstrap附加奇怪的行为

2 个答案:

DEMO