Stickyプラグイン「Fixed Widget」でスティッキーバナーを作成

Sticky（スティッキー）とは、サイドバーのバナーやタグなどが、スクロールしても指定の位置で止まるようにする機能です。今回は、プラグインFixed Widgetで、スティッキーバナーを作成します。

今回のDEMOは、右サイドバーのバナー3つの内、一番下のピンクバナーのみが固定されるようにしました。SPでは、1 カラムになり、コンテンツの下に配置され、固定されません。左カラムの高さに合わせて、スティッキーが解除されます。

2カラムで、左にコンテンツ、右にバナー画像を3つ入れました。カラムの下にスペーサーを設置しています。左カラムの内容が終了すると、スティッキーが解除されます。

Fixed Widget

左サイドバーの外観＞Fixed Widgetをクリックし、設定画面を表示します。まず、一般設定＞Improved versionにチェックします。今回は、スティッキーバナーをブラウザー上から30px開けた場所で固定したいので、Stop Elements＞上マージンの設定を30pxにします。

「Custom Fixed Elements」にスティッキーバナーに設定しする任意のクラス名を入力します。

項目	設定値
Improved version	チェック有
上マージン	30px
Custom Fixed Elements	スティッキーバナーのクラス名

クラス設定

編集画面を開き、スティッキーバナーに設定するピンクバナーをクリックします。右サイドバー、ブロック＞設定＞高度な設定＞ADDITIONAL CSS CLAASS(ES)に、「Custom Fixed Elements」で設定したクラス名を入力します。これで、スティッキーバナーの作成は終了です。

以上で今回の説明は終了です。外部リンクバナーや、他ページへのリンクなど用途に合わせて使用できますね。カラムに入れるのであれば、スティッキー解除要素を指定しなくて良いので、簡単に設定できま。