2016-03-29 7 views
3

私は非常に多くの接辞のチュートリアルを見てみましたが、それらのすべてがデータオフセットトップについて話しています。誰もここでデータオフセットの底のチュートリアルについて知っている?私は黄色、フッターつくれまで、ときに、ユーザーのスクロールで欲しい
私はここにいくつかのコードを書いフォームjsfiddle上記
https://jsfiddle.net/okiewardoyo/3m8oeLp5/
を試してみましたが、私は
ブートストラップ接尾辞 - データオフセット底面に関するチュートリアル?

<ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="100"> 

、データ・オフセット・トップを使用してみてくださいサイドバーが固定されず、フッターに従います。
私は、ここではデータオフセットボトムを使用できると思います。しかし、それを行う方法は?おかげ

答えて

5

は、私が思うtutorial from W3Schoolはあなたの問題はまた、いくつかの簡単なチュートリアルhere

オフセット上部または下部のみ(これはオプションの情報です)「固定」されようとしているどの部分に示しているがあるため十分に明確です。接辞が下にあるときに位置を停止したいので(クラスは接辞 - 下に変わります) この位置は絶対でなければならないので、要素は接辞を適用し続けません(通常、問題はclass affix-bottomが適用されない)。

これをdinamicallyするには、jQueryとaffix関数を両方のリンクで使用することができます。これは、この値(フッターの高さ)をハード割り当てする必要があります。 NAVがどのように見えるか

#nav1.affix-bottom { position: absolute; }

を割り当て ポジション:

`<ul id="nav1" class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="100" data-offset-bottom="600">` 

Your example workingを(実際に私もそのコンテナからNAVを移動しますが、どのような方法で動作します)そんなに

+0

おかげで、あなたの例は私が欲しいものです。私はここでコードを再作成していますhttps://jsfiddle.net/okiewardoyo/twkthn44/2/、それは私が望むものです。私がスクロールすると、セクションが修正され、リーチフッターの後、セクションは修正されずにフッターに従います。 –

+0

しかし、jqueryを使ってフッターの高さを計算すると、それはどうやって行うのですか?私は別のサンプルをこのデータオフセット底部http://jsfiddle.net/uvnGP/131/で見つけましたが、下にスクロールすると、顧客情報が正しく修正されません。 –

+0

[.height()メソッドがあります。 ](http://api.jquery.com/height/)使いやすい。適切な情報をクラスに与えようとしています(例えば正しいボトムオフセット)。あなたが疑問符に満足していれば、この質問は他の人にも役立ちます。コメント内に書き留める2番目の例は、footer boundarieで停止していないのは、var footerHeight = $( 'footer')を使用しているためです。高さの代わりに、長方形の内側の部分の高さを与えるもの。 – SirPeople

関連する問題