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 に答える