◀ 8.

スクロールの際のサイドバー固定方法「position: sticky」

▶
編集
ページの作成
テンプレートを更新

ページの作成

親となるページを選択してください。

ページは必ず何かしらの親ページに紐づきます。
親ページに紐づくページを子ページといいます。
例： 親=スポーツ, 子1=サッカー, 子2=野球

子ページを親ページとして更に子ページを作成することも可能です。
例： 親=サッカー, 子=サッカーのルール

親ページはいつでも変更することが可能なのでとりあえず作ってみましょう！

非常にシンプルに実装できたのでメモ。

縦方向のスクロールに対してサイドバーを固定する実装。

 

HTML

<div class="sidebar">

サイドバーの内容

</div>

 

CSS

.sidebar {
  height: 100%;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

 

子ページ
子ページはありません
同階層のページ
  1. 文法、規則
  2. セレクタ
  3. プロパティ
  4. 色の指定方法
  5. アニメーション
  6. ライブラリ
  7. 「display: flex」を用いて要素を横並びにする方法
  8. スクロールの際のサイドバー固定方法「position: sticky」
  9. 縦の中央寄せ
  10. CSSの変更が反映されない
  11. 画面サイズもしくはスマホの場合のCSS切り替え方法
  12. 一行で左、真ん中、右にそれぞれ要素を寄せる方法
  13. 左右の端にそれぞれ要素を寄せる方法
  14. Bootstrapで両サイドを固定して広告を表示させる方法

人気ページ

最近更新/作成されたページ

最近コメントのあったページ

最近の質問

コメント一覧

コメントがありません

ログインしなければコメント投稿はできません。