web-dev-qa-db-ja.com

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

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

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

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

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

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

twitter-bootstraptwitter-bootstrap-3sidebarsticky
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