20

私はドキュメンテーションを読みましたが、例に示されていることを正確に行っているように感じます。しかし、試してみると、これを機能させることができません。ドキュメントと同様の方法で動作させたいと思います。position:fixedヘッダーを越えてスクロールした後になり、フッターに触れると下position:absoluteにくっつきます。

デモ: http://jsfiddle.net/uvnGP/1/

JS

$("#account-overview-container").affix({
    offset: {
        top: $("header").outerHeight(true),
        bottom: $("footer").outerHeight(true)
    }
});

SASS

#account-overview-container {
    &.affix{
        top:10px;
        bottom:auto;
    }

    &.affix-top{
        //Do I need this?
    }

    &.affix-bottom{
        position:absolute;
        top:auto;
        bottom:140px;
    }
}
4

10 に答える 10

3

SASS の代わりにマークアップで 'data-' 属性を使用してもかまわない場合は、これでうまくいくはずです。

http://www.bootply.com/l95thIfavC

JS 接辞を削除したこともわかります。

HTML

<div class="well well-small affix-top" data-spy="affix" data-offset-top="150" id="account-overview-container">

CSS

body{
    position:relative;
}
header,
footer{
    background: #ccc;
    padding:40px 0;
    text-align:center;
}
header{
    margin-bottom: 10px;
}

.affix-top {
    top: 155px;
    position:absolute;
}
.affix {
    bottom:140px;
}

Bootstrap 3 の更新

使用affix-bottomするには、基本的にフッターの高さまたは添付要素の下のスペースを設定する必要があります。例を次に示します: http://www.bootply.com/l95thIfavC

于 2013-03-11T13:40:16.660 に答える
1

パコ・リベラ作品の解決策！しかし、彼が意図した方法ではありません。ワットは、ちらつき（ジャンプ）の問題を実際に取り除きます。これは次の行です。

.on('affix.bs.affix', function () { // before affix
    $(this).css({
        'width': $(this).outerWidth()  // variable widths
    });
})

CSS幅を設定する必要さえないのに十分にうんざりしています。このパラメーターを読み取るだけで、すでに役に立ちます。コードを次のフラグメントに単純化しましたが、それでも機能します。

.on('affix.bs.affix', function () { // before affix
    $(this).width();
});

Bootstrap Affix プラグインの次のリリースまで、このままにしておきます。

于 2014-03-04T09:25:43.283 に答える
0

以下に示すように、ブートストラップの接辞のコード セグメントを置き換えるだけです。

これは行く - 

this.$element.offset({ top: document.body.offsetHeight - offsetBottom - this.$element.height() })

そして、これはそれを置き換えます

this.$element.offset({ top: scrollHeight - offsetBottom - this.$element.height() })

乾杯。

于 2014-01-20T06:08:27.537 に答える
0

試行錯誤のプロセスを経てこの作業を行いましたが、これが私にとってはうまくいきました。

JS

$(document).ready(function() {
var SidebarTop = $('#your-affix').offset().top - x; //adjust x to meet your required positioning
    SidebarBottom = $('.site-footer').outerHeight() + x;

    $('#your-affix').affix({
        offset: {
        top: SidebarTop,
        bottom: SidebarBottom
        }
    });
});

CSS

#your-affix.affix {
    top: boo px; //the px from top of the window where you want your sidebar
                 //be when you scroll
    width: foo px; //your sidebar width
  }
#your-affix.affix-bottom {
    position: absolute;
    width: foo px; //your sidebar width
}

このコードの後、サイドバーがフッターに到達すると「固定解除」されます。また、下部オフセット オプションに達すると、サイトの上部へのジャンプが停止します。

于 2016-11-26T09:52:51.380 に答える