9

「サブナビゲーション」が必要なサイトがあります。そのため、セクションにスクロールすると、そのツールバーがメイン ツールバーの下に固定されます。これは機能していますが、初期化後に上部オフセットを変更できません。ドキュメントは言う：

接辞('リフレッシュ')

DOM からの要素の追加または削除と組み合わせて affix を使用する場合は、refresh メソッドを呼び出す必要があります。

しかし、これを試してみると、次のようになります。

キャッチされていない TypeError: オブジェクト # にはメソッド 'refresh' がありません

これが私のコードです：

$(function () {
    $('.sec-nav').addClass("affix-top");
    var adjustNavs = function (first) {
        $('.sec-nav').each(function (){
            var $p = $(this).closest('.sec');
            var $$ = $p.prevAll('.sec');
            console.log($$);
            var h = 0;
            $$.each(function () { h+=$(this).outerHeight();});
            console.log(h);

            if (first) {
                $(this).affix({offset: {top: h}});
            } else {
                $(this).data('affix', {b: {options: {offset:{top: h}}}});
                console.log(this);
                $(this).affix('refresh')
            }

        });
    }
    adjustNavs(true);
    $('.sec').bind('DOMSubtreeModified', function () {
        adjustNavs();
    });
});

さまざまなバリエーションを試しました

                $(this).data('affix', {b: {options: {offset:{top: h}}}});

含む：

                $(this).affix({offset: {top: h}});

オフセットを変更できません。接辞プラグインのオフセットを変更するにはどうすればよいですか? ありがとう。

4

3 に答える 3

20

私はそれを考え出した。オフセットを動的に更新する代わりに、オフセット値を関数に変更しました。

$(function () {
    $('.sec-nav').addClass("affix-top").each(function (){
        var $self = $(this);
        var offsetFn = function () {
            var $p = $self.closest('.sec');
            var $$ = $p.prevAll('.sec');
            var h = 0;
            $$.each(function () { h+=$(this).outerHeight();});
            return h;
        }
        $self.affix({offset: {top: offsetFn}});
    });
});

これで、DOM 操作またはウィンドウのサイズ変更によってセクションが変更されると、関数の戻り値が変更されるため、オフセットが自動的に変更されます。

于 2012-08-29T15:46:03.283 に答える