Tips

【追従型】スクロールすると上部に固定される

  /
画面の途中にあるメニュー欄が、スクロールして画面上部に付いたら、そこからずっと付いてくるやつを教えるよ

サンプル

まずはデモをみてください。

デモページ

画面の途中にあったメニューたちが、スクロールして行くと画面上部に固定されていますね。

position:sticky; で固定する

今あなたが作っているCSSにこれを追加するだけでOKです！

#menu_list {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}
画面のtopから0pxで固定するよ

JSを追加

jsと言っても簡単なので大丈夫です！

準備するもの

  1. このページにアクセス → Polyfill for CSS `position: sticky`
  2. 右側のClone or download クリック
  3. Download ZIPをクリック

  4. 自分のPCのフォルダを開く
  5. stickyfill-master.zip 解凍
  6. stickyfill-master > dist > stickyfill.min.js　選択

  7. stickyfill.min.js　のファイルをコピーして自分の作っているjsフォルダの中に入れる
  8. htmlに　<script src=”js/stickyfill.min.js”></script>　記述

style.jsに記述するもの

ここまで準備できたらあとは自分の用意しているjsに少し記述するだけです。

var elem = document.querySelectorAll('.sticky');
Stickyfill.add(elem);

たった２行！

これでスクロールすると上部に固定されるようになります！！

 

終わり\(^o^)/

 

 

関連記事