web-dev-qa-db-ja.com

Twitter Bootstrap Affix-底に貼り付ける方法？

私はドキュメントを読みましたが、例に示されているとおりのことをしているように感じます。しかし、私が試してみると、これを機能させることはできません。ドキュメントと同様の方法で動作することを望みます。あれは。。。になる 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;
    }
}
javascriptjquerycsstwitter-bootstrapaffix
20
CBarr

コードからいくつかの変更がありますが、ソリューションは可変ヘッダーとフッターの高さ、応答性のある幅に適合し、固定ヘッダーの場合は変更できます。

リンクはこちら

http://jsfiddle.net/uvnGP/131/

問題は、接辞が下に当たると、コンテナに追加されたtopとbottom cssスタイルがあり、それを修正する方法がありました。 bottomスタイルをautoにリセットします。そうすれば、topスタイルのみがコンテナで動作します

コードは次のとおりです。

var headerHeight = $('header').outerHeight(true); // true value, adds margins to the total height
var footerHeight = $('footer').innerHeight();
$('#account-overview-container').affix({
    offset: {
        top: headerHeight,
        bottom: footerHeight
    }
}).on('affix.bs.affix', function () { // before affix
    $(this).css({
        /*'top': headerHeight,*/    // for fixed height
            'width': $(this).outerWidth()  // variable widths
    });
}).on('affix-bottom.bs.affix', function () { // before affix-bottom
    $(this).css('bottom', 'auto'); // THIS is what makes the jumping
});
13
Paco Rivera

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

2
Zim

簡単な答え：接尾辞の中のコンテンツは、ボーダーを使用している場合は_box-sizing: border-box;_を使用していないことに注意してください。

説明：ドキュメントに対する要素の現在の位置を計算するためにaffix.jsで使用されるjQuery offset()関数は、境界線を考慮しません。

注：jQueryは、非表示要素のオフセット座標の取得、またはbody要素に設定された境界線、マージン、パディングの計算をサポートしていません。

したがって、接辞内のコンテンツに境界線があり、_box-sizing_が_border-box_に設定されている場合、高さには境界線が含まれますが、オフセットは含まれないため、接辞が使用する計算はわずかにオフになります。

1
daddeo

パコリベラのソリューションが機能します！しかし、彼が意図した方法ではありません。 Watは、この行のちらつき（ジャンプ）の問題を本当に取り除きます。

.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プラグインの次のリリースまで、そのように保ちます。

1
Konstantin

私は自分のアプリでそれを機能させることができました。それは、ボトムスタイリングをaffix呼び出しに渡されるボトムと一致させることです。フッターの高さが固定されており、最も近い位置にある親がボディである場合、両方に同じ値を渡すことは問題です。これは、Bootstrap 2.3のドキュメントの here および here に見られるように、十分に機能します。

-

ここで、固定の高さのフッターがないと仮定します。

ステップ1：最も近くに配置された親（オフセット親）

まず、絶対配置を使用して下部に固定しますが、最も近くに配置された親がボディ（フッターを含む）になるため、下部の固定値はありません。これを修正するには、フッター以外のすべてを囲む新しい位置の親を作成する必要があります（重要：ヘッダーもおそらく外側になります）。 _position: relative;_をトップの_.container_またはその祖先のいずれかに設定します（重要：フッターはこの要素の後になければなりません）。

ステップ2：フッターの高さ

今、あなたのボトムはボディではなくコンテナに相対的ですが、接辞のボトム値（接辞をボトムに貼り付けるタイミングを知るために使用されます）はまだボディの終わりに相対的であるため、関数を渡す必要がありますコンテナの後の要素の高さを計算します。フッターのみの場合は、$('footer').outerHeight(true)で十分です。

ステップ3：トラブルシューティング

今、あなたはそれをすべて正しくしていますが、まだ3つのことが間違ったスティック位置と狂ったフラッシュを引き起こす可能性があります：

  1. 2番目のフッターなど、考慮に入れていないフッター以外の視覚要素、または便利な Rails-footnotes gem ;

  2. DOMに要素を追加するブラウザ拡張機能。フローに非表示または非表示の場合は、高さをカウントしないでください。回避する簡単な方法は、アプリが知っている要素のみをカウントすることです。あなたのアプリを壊します。拡張機能がインストールされていないブラウザまたは設定を使用するか、単に「ポルノモード」（Chromiumのシークレットモード（Ctrl+Shift+n）、Firefoxでのプライベートブラウジング（Ctrl+Shift+p））拡張機能を有効にしていない場合。

  3. JavascriptライブラリもDOMに要素を追加します。要素の高さもカウントしないでください。

これらを解決するには、tryを使用してWord全体（CoffeeScript with Underscore.js）で動作するようにします。

__($('footer').nextAll(':visible').addBack())
  .filter((el) -> el.offsetParent?)
  .reduce(((memo, el) -> memo + $(el).outerHeight(true)), 0)
_

JavascriptとjQuery.fn.eachを使用した同じこと：

_var sum = 0
$('footer').nextAll(':visible').each(function() {
  this.offsetParent != null && sum += $(this).outerHeight(true)
}
return sum
_

または、知っている要素のみを説明することもできます（これは、チャレンジ用にコーディングしたもう1つの要素です）。

_$('footer').outerHeight(true) + ($('#footnotes_debug').outerHeight(true) || 0)
_
1
michelpm

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

これは行く-

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

これはそれを置き換えます

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

乾杯。

0
Rohan

フィドルでウィンドウサイズを少し大きくすると、フィドルは希望どおりに動作するようです。接辞が壊れる寸法ではWebサイトが使用できないことを考慮して、それを無視するか、問題を修正するのではなく、より小さなスペースで動作するようにレイアウトを変更する必要があります。ドキュメントのbootstrap affixは小さな解像度には使用されていません。私はそれに続きます。

0
Alexander Mistakidis

可能な解決策の1つは、affix-bottomを次のように設定することにより、bottom: nullの状況を完全に無視することです。

$("#my-selector").affix({
    offset: {
        top: $("#some-thing").outerHeight(true),
        bottom: null
    }
});
0
CBarr

Positionおよびtop、bottomプロパティを使用してメニューの下部を設定し、ここでデモを使用します http://www.tutorialspark.com/twitterBootstrap/TwitterBootstrap_Affix.php

0
user2719087

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

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
}

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

0
Oksana Romaniv

セットする position: absolute にとって .affix-top＆.affix-bottom、およびposition: fixed にとって .affix。

公式によると doc

0
Stream Huang