Wiki3 スクロールするとくっついてくるバナー （〇 CSS）

•  Top
• 小技・テクニック集
• ちょいムズ
• ▶くっつきバナー

---

 

実行例１

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

概要

 

はい、ウザいです。
 

　このようにスクロールするとついてくる画像のことをスティッキーアイテムと呼んだりします。スマホとかでよく見るあの広告はスクロール広告と呼ばれ、たぶん同じような原理で動いてます。
 

　Webページをスクロールするときスワイプしなければならないスマホ勢にとって、画面の一部を占有し続けるスティッキーアイテムは効果抜群です。悪い意味で。

 

　日頃スマホ勢の存在に頭を悩ませているwiki編集者はこれを至る所に設置してやるとよいでしょう。

 

実行例２

　スティッキーアイテムの下から別のスティッキーアイテムが流れてきた時の挙動を確認してみましょう。

　分かりやすいように、今度は色を反転させ半透明にしています。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

　興味深いですね。

 

 

ソース

 

　CSS

.sticky{
  position: -webkit-sticky;
  position: sticky;
  top: 0px;
}

　top: ○○px; プロパティでスティッキーアイテムが画面上のどの高さで固定されるかを指定します。この部分を忘れるとスティッキーアイテム化しません。
 

 

　また、position: -webkit-sticky; プロパティを省くと iPhone のブラウザ（Safari）上で機能しなくなるようです。あえて省くのも手です。

 

 

　HTML
 

　実行例１

<p class="sticky"><img src="画像アドレス" /></p>

　スティッキーアイテムは可動範囲を定めない限り、ページの一番下までくっついてきます。

 

　実行例２

<div>
<p class="sticky"><img src="画像アドレス" /></p>
:
: 本文
:
<div>
<p>ここは超えられる</p>
</div>
:
:
: ここでおしまい
</div>

　スティッキーアイテムがブロック要素 <div></div>, <p></p> などの中に格納されている場合、その範囲を超えて移動することはできません。ただし自身が格納されていない別のブロック要素は飛び越えることができます。
 

 

応用例

　真面目に使うなら。大量のキャラクターを属性やレア度ごとに並べた表を作るとき、スティッキーアイテムがあると便利です。
 

 

　ですが下の例のように大きすぎる画像をスティッキーアイテム化させるとそちらに注目を集めかねないので、文字中心のパネルを作ってスティッキーアイテム化させるのが良いでしょう。

 

 

 

★5一覧

《アントパイア・パラポネラ》
《アントパイア・ハンター》
《アントパイア・エンプレス》
《アントパイア・バルカ》
《アントパイア・ゼラニウム》
《デミドラグーン・フェイリア》
《レジェンダリー・ウィッチ》
《マナドラゴン》
《鎌鳴ノ異目人形》
《冒涜の巨兵》
《三首龍 アジ・ダハーカ》
《デミドラグーン・シュクセ》
《シャヴランヌ・サーペリオン》
《滅世龍 デミスドラグーン》
《龍笛の奏者 ヤマト》
《希望の紡ぎ手 ナディエージダ》
《ジュラシック・アイビー》
《ベスティヴァの魔猫 ガージェイ》
《希望の煌龍》
《龍友の妖精 ムルゥ》
《ルージャ・クリムーロ》
《ユーステソ・アルビトラシスト》
《ベルフェゴル・ラ・ディアブラ・レージョ》
《サターノ・ラ・ディアブラ・レージョ》
《マルーマ・カヴァリーロ》
《アントパイア・パラポネラ》
《アントパイア・ハンター》
《アントパイア・エンプレス》
《アントパイア・バルカ》
《アントパイア・ゼラニウム》
《デミドラグーン・フェイリア》
《レジェンダリー・ウィッチ》
《マナドラゴン》
《鎌鳴ノ異目人形》
《冒涜の巨兵》
《三首龍 アジ・ダハーカ》
《デミドラグーン・シュクセ》
《シャヴランヌ・サーペリオン》
《滅世龍 デミスドラグーン》
《龍笛の奏者 ヤマト》
《希望の紡ぎ手 ナディエージダ》
《ジュラシック・アイビー》
《ベスティヴァの魔猫 ガージェイ》
《希望の煌龍》
《龍友の妖精 ムルゥ》
《ルージャ・クリムーロ》
《ユーステソ・アルビトラシスト》
《ベルフェゴル・ラ・ディアブラ・レージョ》
《サターノ・ラ・ディアブラ・レージョ》
《マルーマ・カヴァリーロ》
 

★4一覧

《アントパイア・パラポネラ》
《アントパイア・ハンター》
《アントパイア・エンプレス》
《アントパイア・バルカ》
《アントパイア・ゼラニウム》
《デミドラグーン・フェイリア》
《レジェンダリー・ウィッチ》
《マナドラゴン》
《鎌鳴ノ異目人形》
《冒涜の巨兵》
《三首龍 アジ・ダハーカ》
《デミドラグーン・シュクセ》
《シャヴランヌ・サーペリオン》
《滅世龍 デミスドラグーン》
《龍笛の奏者 ヤマト》
《希望の紡ぎ手 ナディエージダ》
《ジュラシック・アイビー》
《ベスティヴァの魔猫 ガージェイ》
《希望の煌龍》
《龍友の妖精 ムルゥ》
《ルージャ・クリムーロ》
《ユーステソ・アルビトラシスト》
《ベルフェゴル・ラ・ディアブラ・レージョ》
《サターノ・ラ・ディアブラ・レージョ》
《マルーマ・カヴァリーロ》
《アントパイア・パラポネラ》
《アントパイア・ハンター》
《アントパイア・エンプレス》
《アントパイア・バルカ》
《アントパイア・ゼラニウム》
《デミドラグーン・フェイリア》
《レジェンダリー・ウィッチ》
《マナドラゴン》
《鎌鳴ノ異目人形》
《冒涜の巨兵》
《三首龍 アジ・ダハーカ》
《デミドラグーン・シュクセ》
《シャヴランヌ・サーペリオン》
《滅世龍 デミスドラグーン》
《龍笛の奏者 ヤマト》
《希望の紡ぎ手 ナディエージダ》
《ジュラシック・アイビー》
《ベスティヴァの魔猫 ガージェイ》
《希望の煌龍》
《龍友の妖精 ムルゥ》
《ルージャ・クリムーロ》
《ユーステソ・アルビトラシスト》
《ベルフェゴル・ラ・ディアブラ・レージョ》
《サターノ・ラ・ディアブラ・レージョ》
《マルーマ・カヴァリーロ》
 

★3一覧

《アントパイア・パラポネラ》
《アントパイア・ハンター》
《アントパイア・エンプレス》
《アントパイア・バルカ》
《アントパイア・ゼラニウム》
《デミドラグーン・フェイリア》
《レジェンダリー・ウィッチ》
《マナドラゴン》
《鎌鳴ノ異目人形》
《冒涜の巨兵》
《三首龍 アジ・ダハーカ》
《デミドラグーン・シュクセ》
《シャヴランヌ・サーペリオン》
《滅世龍 デミスドラグーン》
《龍笛の奏者 ヤマト》
《希望の紡ぎ手 ナディエージダ》
《ジュラシック・アイビー》
《ベスティヴァの魔猫 ガージェイ》
《希望の煌龍》
《龍友の妖精 ムルゥ》
《ルージャ・クリムーロ》
《ユーステソ・アルビトラシスト》
《ベルフェゴル・ラ・ディアブラ・レージョ》
《サターノ・ラ・ディアブラ・レージョ》
《マルーマ・カヴァリーロ》
《アントパイア・パラポネラ》
《アントパイア・ハンター》
《アントパイア・エンプレス》
《アントパイア・バルカ》
《アントパイア・ゼラニウム》
《デミドラグーン・フェイリア》
《レジェンダリー・ウィッチ》
《マナドラゴン》
《鎌鳴ノ異目人形》
《冒涜の巨兵》
《三首龍 アジ・ダハーカ》
《デミドラグーン・シュクセ》
《シャヴランヌ・サーペリオン》
《滅世龍 デミスドラグーン》
《龍笛の奏者 ヤマト》
《希望の紡ぎ手 ナディエージダ》
《ジュラシック・アイビー》
《ベスティヴァの魔猫 ガージェイ》
《希望の煌龍》
《龍友の妖精 ムルゥ》
《ルージャ・クリムーロ》
《ユーステソ・アルビトラシスト》
《ベルフェゴル・ラ・ディアブラ・レージョ》
《サターノ・ラ・ディアブラ・レージョ》
《マルーマ・カヴァリーロ》