web-dev-qa-db-ja.com

bootstrap 3を使用してスティッキーな左サイドバーメニューを作成する方法

次のようなbootstrap 3の左スティックバーメニューを作成します。

http://getbootstrap.com/getting-started/

私は与えられたドキュメントを読んだでしょう http://getbootstrap.com/javascript/#affix

.affixを試してみましたが、結果はゼロです。


更新:@Skelly、
親切な例に感謝します。はい、あなたの例のようにしたいです。サンプルHTMLをダウンロードしますが、ダウンロード後にHTMLファイルのサイドバーが機能しませんでした。

33
Sohag-Monist It

ブートストラップ3

次に、左サイドバーの例を示します。

http://bootply.com/90936 (Bootstrap docsと同様)

トリックは、CSSとともにaffixコンポーネントを使用して配置することです。

  #sidebar.affix-top {
    position: static;
    margin-top:30px;
    width:228px;
  }

  #sidebar.affix {
    position: fixed;
    top:70px;
    width:228px;
  }

EDIT-もう1つ フッターとaffix-bottomの例


ブートストラップ4

AffixコンポーネントはBootstrap 4で削除されたため、スティッキーサイドバーを作成するには、サードパーティのAffix pluginを使用できますthis Bootstrap 4スティッキーサイドバーの例 、またはsticky-top classを使用 この回答で説明

関連: Bootstrap 4?にレスポンシブnavbarサイドバー「ドロワー」を作成します

47
Zim

Fixed-Sticky のようなPolyfillを使用することもできます。特にBootstrap4を使用している場合、affixコンポーネントは 含まれなくなりました

Affix jQueryプラグインを削除しました。代わりに、位置:スティッキーポリフィルを使用することをお勧めします。

6
H6.

私は自分のコードでこの方法を使用しました

$(function(){
    $('.block').affix();
})
4
Evgeniy