プログラミング

[CSS・JavaScript]サイドバーを固定・スクロール追従させる実装方法

サイドバーを固定・スクロール追従させる実装方法

みなさんこんにちは!ワトスンです。
今回は、、

サイドバーを固定してスクロール追従させたい。できればプラグインなしでCSSまたはJavaScriptを使用して実装したい。難しそうだけどどうやって実装するの?プログラムの参考を見せて欲しい

といった要望に答えます。

 

■読んでほしい人
サイドバーウィジェットの使い方を理解している方/JavaScriptの基本を理解している方

 

今回はWordPressでのサイドバー領域に実装する方法をご紹介していきます。

サイドバーの一部を固定・追従させる機能を使い、目次などを常に横に表示させておくことができます。
そうするとユーザビリティが高まり、記事のリピーターも増えていきます。

その他、宣伝したいコンテンツなどを常にサイドバーに固定しておくと、よりユーザーに見てもらえる機会が増えます。

実装方法はそこまで難しくないので、ぜひ皆さんにも試してもらえたらなと思います。

ではさっそくまとめていきます。

 

JavaScriptでのサイドバー追従方法

サイドバーの固定・スクロール追従の機能を追加する方法は2つありますが、まずはJavaScriptで作成する方法をご紹介します。

具体的な手順としては、

・ウィジェットにスクロール追従領域を用意(function.phpとsidebar.php)

・機能の追加(scroll.js)

完成/使用

です。

それぞれの手順を具体的に解説していきます。

 

ウィジェットにスクロール追従領域を用意

JavaScriptでプログラムを組んでいく前に、まずはサイドバーの中に追従追従領域を用意する必要があります。

下の画像のようにウィジェットにサイドバーとは別にスクロール領域を用意します。

ウィジェットにスクロール領域を追加

この領域に追加されたコンテンツは全て固定・スクロール追従されます。

この領域の用意はfunction.phpとsidebar.phpで追従領域を追加します。

function.php

下↓のコードを「function.php」に追加します。

固定・スクロール追従領域のIDは「sidebar-scroll」で設定しています。

sidebar.php

次に、下↓のコードを「sidebar.php」に追加します。

function.phpで設定したIDに合わせて、sidebar.phpでもIDを「sidebar-scroll」で領域を用意しています。

sidebar.phpの参考↓

普通のサイドバーとは別に固定・スクロール追従領域を設置しています。

次は用意した領域に固定・スクロール追従機能を追加していきます。

 

固定・追従機能の追加

固定・スクロール追従機能をJavaScriptで作成していきます。

先ほど用意した領域にこの機能を設置します。

「固定するコンテンツ」のIDはそのままで使用してください。
「サイドバー」と「コンテンツを収める範囲」のIDはご自身のに合わせて変更してください。

これで固定・スクロール追従機能を作成し終わりました。

 

機能の使い方

用意した固定・スクロール追従機能を実際に使用していく方法をご紹介します。

使い方は簡単です。

「外観→ウィジェット」から「スクロール追従領域」に固定したコンテンツを追加するだけです。

固定・スクロール追従機能の使い方

 

CSSでのサイドバー追従方法

CSSでも固定・スクロール追従機能を作成することができます。

position:stickyを使用

機能を追加するには、positionプロパティのstickyを使用します。

HTMLの用意

まずはHTMLを用意します。

CSS

用意したHTMLに合わせてCSSを記述します。

親要素に忘れず「position:relative」を効かせてください。
position:stickyには親要素が必要です。

その他の細かいCSSは各自用意ください。

 

いかがだったでしょうか。
JavaScriptが苦手な人はCSSで実装してみて下さい。

コピペでも実装できるので、是非試してみて下さい。

なにか疑問点がありましたらコメントまたはTwitterのDMでご連絡ください!

以上です。

コメントを残す

メールアドレスが公開されることはありません。

関連記事