0

我正在尝试在左栏中创建一个固定菜单，但在我的情况下，词缀插件的工作很奇怪：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
        }
    });
});
4

2 回答 2

2

只需使用affix：

避免脚本

在引导程序本身中有一个名为的内置类affix，它由以下 css 组成：

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

演示

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>
于 2014-08-26T13:48:28.113 回答
0

我只需要添加

.affix-bottom {
    position: absolute;
}
于 2014-08-26T14:48:26.423 回答