スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
総合案内当ブログについて
Windowsの目次Linuxの目次Linuxの目次2・ ・自作PC関連の目次Web技術関連の目次
全記事一覧情報サイト新着RSS一覧

Sponsored Link

bootstrap3のaffixの動作がおかしい対処

bootstrap3のaffixを使ってみたら、スクロールすると追従する方のコンテンツの横幅が変わってしまう&一番下まで行った時に上に戻ろうとすると一番上に戻ってしまう現象に遭遇。
それぞれどうもbootstrapのバグみたいだけど、わりと簡単に直ったのでメモ。
bootstrapは3.3.4。

1.横幅が変わってしまう
Affixプラグインでスクロール時に横幅が変わってしまう場合
この方は横幅が小さくなってしまうみたいだけど、同じ対処でおk。

調整用のjsを新たに作ってそこにコピペでbootstrapのjsよりあとに読み込ませればおっけー。

StackOverFlowにも同様の問題の対処法が載ってます。(コードが少し違うけど)
Bootstrap 3.0 affix with list changes width

affix起動時に一瞬ちらつくような感じがするけどまぁ解決。

2.一番下までスクロールしたあと戻ろうとすると位置がおかしくなる
一番下までスクロールするときはついてくるけど切り返すと一番下に固定されてる。で、一番上まで戻ると最初の位置になり、またスクロールしても追従してくる。
要は一番下まで行ったあと上に戻るときに追従してくれないということ。

Bootstrap3のAffixバグについて
Bootstrap 3.0 affix with list changes width

結局.affix-bottomクラスが付与され解除されないのが問題みたい。
これはCSSで解決可能。

affix-bottom にposition relativeを追加するだけ。
jsとcss両方でなんとかしてる人もいるみたいだけど、一応これだけで解決。

Affixってなんか難しい上にちょっとバグ多い気がするので、bootstrapでサイト制作しててもこの部分は外部jqueryプラグインとか使って同じような動きを実現したほうが早くて簡単かも知れません。

関連記事
ド素人だけどBootStrapでサイトを作ってみるよ
久々のテンプレ変更
Bootstrap3を使ってFC2ブログのテンプレを作ろうその一
Bootstrap3を使ってFC2ブログのテンプレを作ろうその二
Bootstrap3でFC2のテンプレを作ろう 2回目( blue-navbar )
Bootstrap3でFC2のテンプレを作ろう 2回目( lightgreen-navbar,black-navbar,white-navbar )
関連記事
総合案内当ブログについて
Windowsの目次Linuxの目次Linuxの目次2・ ・自作PC関連の目次Web技術関連の目次
全記事一覧情報サイト新着RSS一覧

Sponsored Link

コメントの投稿

管理者にだけ表示を許可する
ブログ内検索

カスタム検索

フリーエリア

クリックで救える命がある。

レンタルサーバー

さくらのマネージドサーバ
さくらインターネットのVPS
ConoHaのVPS
WebARENA VPSクラウド
99円レンタルサーバー
【CloudCore VPS】
GMOクラウドのレンタルサーバー
転送量無制限 ABLENET
@WAPPYレンタルサーバー
SPPDレンタルサーバー

カテゴリー+月別アーカイブ

 

アクセスカウンター

現在の閲覧者数:

プロフィール

Author:tmin
PCヲタ。ライト2ちゃんねら。
スロット好きのギャンブラー。(元
むしろ人生がギャンブルだが目下のところ負けっぱなし。
座右の銘は「結果オーライ」。故に基本適当。
トラブルもまた楽しみのひとつ

コメント、トラバ、相互リンク歓迎。お気軽にどうぞ。
当ブログについて
Twitterでこっちとあっちの更新情報流すことにしてみます。
http://twitter.com/t_min
Project Mikunchu♪Wikiできました。
Mikunchu200x40.png


上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。