位置の使用方法：純粋なCSSとブートストラップを使用したサイドバーのスティッキー
序章
スティッキーサイドバーは、ユーザーが最初に表示された位置を超えてスクロールした場合でも、サイドバーを画面上に保持するためのWebデザイン手法です。 これは、サブナビゲーションに簡単にアクセスできるようにし、ユーザーがスクロールするときにサイドバーのコンテンツをより強調し、広告の表示回数、クリック数、ページビューを増やす可能性がある場合に役立ちます。
これまで、この機能は、スクロール位置を検出し、要素の位置を切り替えるためのJavaScript計算によって頻繁に実現されていました。 position に absolute また fixed.
現在、W3C仕様は定義しています sticky ポジショニング、そして多くの最新のブラウザはすでにそれを採用しています。
このチュートリアルでは、を使用するサイドバーを備えたWebページを作成します position: sticky およびブートストラップ4。
前提条件
このデモンストレーションでは、ローカル環境を設定する必要はありません。 選択したコードエディタとブラウザを使用できます。
このチュートリアルを完了するには、次のものが必要です。
- CSSおよびHTMLに関するある程度の知識が必要になります。 特に、CSSの動作と position：absoluteおよびposition：fixedの制限についてある程度理解しておくと有益な場合があります。
- ブートストラップフレームワークおよびプロジェクトでの実装方法に精通していること。
ステップ1—使用 position: sticky
使用仕様 position: sticky 次のような方向が必要です top また bottom 以外の値で指定する auto.
このプロパティを使用するCSSクラスの例は次のようになります。
.sticky {
position: sticky;
top: 0;
}
体験する position: sticky、新しいプロジェクトディレクトリを作成できます。
- mkdir position-sticky-example
そして、そのディレクトリに移動します。
- cd position-sticky-example
このプロジェクトディレクトリ内に、 example.html 次のコードでファイルします。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Sticky Position Example</title>
<style>
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
}
.placeholder-example {
background: lavender;
height: 100vh;
padding: 1em;
}
.sticky-example {
background: cornflowerblue;
padding: 1em;
}
.sticky {
position: sticky;
top: 0;
}
</style>
</head>
<body>
<div class="sticky-example sticky">Sticky</div>
<div class="placeholder-example">Placeholder</div>
</body>
</html>
このコードは div とともに sticky クラスと別の div とともに placeholder ビューポートの全高であるクラス。
開ける index.html Webブラウザで、その方法を観察します position: sticky ページを上下にスクロールすると動作します。
ブラウザのサポートの確認とフォールバックの使用
新しいCSSプロパティを採用する前に、さまざまなブラウザでどの程度サポートされているかを調べる必要があります。 機能がターゲットオーディエンスのブラウザでサポートされていない場合、プロジェクトに採用するのに適した候補ではない可能性があります。
ブラウザのサポートを確認するためのツールの1つは、使用できますかです。 この時点で、位置のページを使用できますか：sticky は、サポートがないことを報告します position: sticky InternetExplorerで。 最新バージョンのEdge、Firefox、Chrome、Safari、およびOperaがサポートされています。 そして、の特定の側面が position: sticky 一部のブラウザでは期待どおりに動作していません。
への賢明なフォールバック position: sticky だろう position: relative. 同一のブラウザエクスペリエンスにつながることはありませんが、サポートされていないブラウザを使用しているユーザーが引き続き内のコンテンツにアクセスできるようになります。 position: sticky 要素。
また、CSSプロパティにベンダープレフィックスを使用することを検討することもできます。 position: -webkit-sticky、SafariおよびiOSSafariの古いバージョンに対応します。
書き直された sticky フォールバックをサポートするクラスは次のようになります。
.sticky {
position: relative;
position: -webkit-sticky;
position: sticky;
top: 0;
}
このコードは、ブラウザが認識しないプロパティ値を無視し、最後の有効な値のみを使用する方法を利用しています。
これで、 position: sticky 行動。 それを高度なシナリオに適用する方法を見てみましょう。
ステップ2—Bootstrap4を使用してスティッキーサイドバーを構築する
目的のレイアウトには、コンテンツの長いブロックに隣接して配置されるサイドバーがあります。 これは、Bootstrap4ライブラリを使用して実現できます。
目的のレイアウトの図は次のとおりです。
A title-section ページの上部にまたがっています。 A content-section 画面の左側の大部分を占めています。 画面の右側には、複数のサイドバー要素があります。 container 1, container 2, container 3、 と container n.
新しいを作成します index.html ファイルを作成し、Bootstrap4ライブラリを追加します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Sticky Position Sidebar</title>
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
crossorigin="anonymous"
/>
<style>
</style>
</head>
<body>
</body>
</html>
希望のレイアウトを実現するために、 body コンテンツは、ブートストラップマークアップ構造を採用する必要があります。
<body>
<article>
<div class="container-fluid">
<div class="row">
<div class="col">
<div class="title-section">
<h1>Stacking Sticky Sidebars with Bootstrap 4</h1>
</div>
</div>
</div>
<div class="row">
<div class="col-7">
<div class="content-section">
Content Section
</div>
</div>
<div class="col-5">
<div class="sidebar-section">
<div class="sidebar-item">
<div class="sidebar-content">
Container 1
</div>
</div>
</div>
</div>
</div>
</div>
</article>
</body>
このマークアップは、 content-section 7列幅を拡張するサイドバーセクションと5列幅を拡張するサイドバーセクション。 これにより、最大12列が追加されます。これは、Bootstrap4のデフォルトのグリッドシステムです。
申請中 sticky-top
Bootstrap 4には、という名前のユーティリティクラスも付属しています。 sticky-top 機能的には sticky 以前に作成したクラス。
お申し込み前に sticky-top、コンテンツとサイドバーのセクションをより視覚的にわかりやすくするために、いくつかのスタイルを追加します。
<style>
.content-section {
background: lavender;
height: 1000px;
min-height: 100vh;
padding: 1em;
}
.sidebar-section {
height: 100%;
}
.sidebar-content {
background: cornflowerblue;
padding: 1em;
}
</style>
このコードは、 background-color, height、 と padding コンテンツとサイドバーのセクション。
注： height ここでコンテンツセクションに提供されているのは、デモンストレーションの目的で任意の量です。 十分な大きさのコンテンツがある場合は、それを利用してレイアウトを定義し、 height 財産。
訪問するとき index.html Webブラウザーでは、コンテンツセクションと小さなサイドバーセクションを確認する必要があります。
ここで、 sticky-top クラスへ sidebar-item:
<div class="col-5">
<div class="sidebar-section">
<div class="sidebar-item sticky-top">
<div class="sidebar-content">
Container 1
</div>
</div>
</div>
</div>
ページを下にスクロールすると、サイドバーは「スティッキー」な動作をするはずです。
これはおそらく、ほとんどのシナリオで最も一般的な機能要求になるでしょう。 次のステップでは、より想像力に富んだシナリオを検討します。
ステップ3—高度なシナリオを試す
次のセクションでは、 index.html 以前に作成したファイルを作成し、複数のアイテムを追加し、サイドバーアイテムを積み重ね、最後にサイドバーアイテムを画面から押し出します。
スティッキーサイドバーと複数のアイテムを試す
例に基づいて、サイドバーにアイテムを追加できます。
<div class="col-5">
<div class="sidebar-section">
<div class="sidebar-item sticky-top">
<div class="sidebar-content">
Container 1
</div>
</div>
<div class="sidebar-item sticky-top">
<div class="sidebar-content">
Container 2
</div>
</div>
<div class="sidebar-item sticky-top">
<div class="sidebar-content">
Container 3
</div>
</div>
<div class="sidebar-item sticky-top">
<div class="sidebar-content">
Container 4
</div>
</div>
</div>
</div>
訪問するとき index.html Webブラウザーでは、コンテンツセクションと複数のサイドバーアイテムを確認する必要があります。
サイドバーセクションをフレックスボックスに変換し、アイテムを column と space-between、より視覚的に興味深いサイドバーを作成できます。
<style>
/* ... */
.sidebar-section {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
}
/* ... */
</style>
訪問するとき index.html Webブラウザーでは、コンテンツセクションと、間にスペースがある複数のサイドバーアイテムを確認する必要があります。 下にスクロールすると、サイドバーのアイテムが画面の上部に貼り付くのを確認する必要があります。
すべてのサイドバーアイテムを積み重ねてみる
一般的な機能要求は、すべてのサイドバーアイテムを画面上に視覚的に「スタック」しておくことです。
これには、 height 各サイドバーアイテムの top 価値。 デフォルトの代わりに top: 0 によって提供された sticky-top クラスでは、前のサイドバーアイテムの高さの合計を提供します。
このデモではサイドバーアイテムの数と高さがわかっているため、を使用して各サイドバーアイテムにオフセットを適用できます。 nth-child:
<style>
/* ... */
.sidebar-item:nth-child(2) {
top: 3.5em;
}
.sidebar-item:nth-child(3) {
top: 7em;
}
.sidebar-item:nth-child(4) {
top: 10.5em;
}
/* ... */
</style>
訪問するとき index.html Webブラウザーでは、コンテンツセクションと、間にスペースがある複数のサイドバーアイテムを確認する必要があります。 下にスクロールすると、サイドバーのアイテムが積み重なっているのがわかります。
ただし、これはサイドバーに含まれていることを知っているシナリオに制限されています 4 それぞれのサイドバーアイテム 3.5em 高い。 さらに複雑になると、Pure CSSの制限が強調され、JavaScriptソリューションを使用する方が時間に適している場合があります。
サイドバーアイテムを画面外に押し出す実験
前の例を基に構築を続けると、制限の少ない代替手段として、前のサイドバーアイテムを画面から「プッシュ」することができます。
まず、以前の実験を削除する必要があります nth-child.
この新しい構成では、 flex-grow のプロパティ .sidebar-item:
<style>
/* ... */
.sidebar-item {
flex-grow: 1;
}
/* ... */
</style>
今、移動します sticky-top からのクラス sidebar-item 要素に sidebar-content エレメント：
<div class="col-5">
<div class="sidebar-section">
<div class="sidebar-item">
<div class="sidebar-content sticky-top">
Container 1
</div>
</div>
<div class="sidebar-item">
<div class="sidebar-content sticky-top">
Container 2
</div>
</div>
<div class="sidebar-item">
<div class="sidebar-content sticky-top">
Container 3
</div>
</div>
<div class="sidebar-item">
<div class="sidebar-content sticky-top">
Container 4
</div>
</div>
</div>
</div>
訪問するとき index.html Webブラウザーでは、コンテンツセクションと複数のサイドバーアイテムを確認する必要があります。 下にスクロールすると、サイドバーアイテムが前のサイドバーアイテムを「プッシュ」する「スタック」動作を観察する必要があります。
注：このチュートリアルの以前のバージョンでは、 position: absolute 経験した制限によるアプローチ display: flexbox と position: sticky 当時のWebブラウザで。
このCodePenの例は、 position: absolute アプローチ。
ただし、今回の改訂時点では、 flexbox このアプローチは、柔軟性が高く、さまざまな量のサイドバーアイテム、高さ、およびオフセットの処理が少なくて済みます。
幅、高さ、オフセットを調整することで実行できる実験がさらにあります。
結論
このチュートリアルでは、CSSプロパティについて学習しました position: sticky Webデザインのレイアウトのサイドバーにどのように使用できるか。
ブラウザのサポートによる制限があることに注意してください。 JavaScriptまたは position: absolute 視聴者のブラウザの使用状況に応じた代替手段。
CSSの詳細については、CSSトピックページで演習とプログラミングプロジェクトを確認してください。
