Twitterでブログ更新情報を配信中

【CSS】position:stickyで指定した位置にサイドバーを固定し追従型メニューにする

ヘッダーメニューやサイドバーを固定するときのプロパティといえば「position : fixed」ですが、「position : sticky」を使うと、同じ動作ができるのを知っていますか。こちらは指定した位置に到達するとfixedのふるまいをする性質を持っています。

例えば、見出しやメニューを追従させたいときに便利です。長いコンテンツが複数ある場合は、見出しなどを固定すると分かりやすいですよね。

この他にもパララックス効果を簡単に取り入れることができるので、表現の幅が広がります。

position:stickyで固定する

HTMLのソースコード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="reset.css">
  <link rel="stylesheet" href="style.css">
  <title>Sticky</title>
</head>
<body>
  <header>
    <ul class="nav">
      <li><a href="#">nav1</a></li>
      <li><a href="#">nav2</a></li>
      <li><a href="#">nav3</a></li>
      <li><a href="#">nav4</a></li>
      <li><a href="#">nav5</a></li>
    </ul>
  </header>
  <div class="contents">
    <article class="main">
      <p>Contents</p>
    </article>
    <aside>
      <ul class="side1 sticky">
        <li><a href="#">side-nav1</a></li>
        <li><a href="#">side-nav1</a></li>
        <li><a href="#">side-nav1</a></li>
        <li><a href="#">side-nav1</a></li>
        <li><a href="#">side-nav1</a></li>
      </ul>
      <ul class="side1 sticky">
        <li><a href="#">side-nav1</a></li>
        <li><a href="#">side-nav1</a></li>
        <li><a href="#">side-nav1</a></li>
        <li><a href="#">side-nav1</a></li>
        <li><a href="#">side-nav1</a></li>
      </ul>
      <ul class="side1 sticky">
        <li><a href="#">side-nav1</a></li>
        <li><a href="#">side-nav1</a></li>
        <li><a href="#">side-nav1</a></li>
        <li><a href="#">side-nav1</a></li>
        <li><a href="#">side-nav1</a></li>
      </ul>
    </aside>
  </div>
  <footer>
    <p>footer</p>
  </footer>
</body>
</html>

CSSのソースコード

@charset "utf-8";
/--- header ---/
header{
   background-color: #afeeee;
}
.nav{
   display: flex;
   justify-content: space-around;
}
.nav li{
   padding: 10px;
}
/--- contents ---/
.contents{
   min-height: 1200px;/スクロール用に高さ指定/
   display: flex;
}
article{
   width: calc(100% - 300px);
   background-color: #eeeeee;
   display: flex;
   justify-content: center;
   align-items: center;
}
aside{
   width: 300px;
}
.sticky{
   position: -webkit-sticky;
   position: sticky;
   top: 0;
}
.side1{
   background-color: #e0ffff;
}
.side2{
   background-color: #87cefa;
}
.side3{
   background-color: #6495ed;
}
aside ul li{
   padding: 10px;
}
/--- footer ---/
footer{
   padding: 10px;
   background-color: #afeeee;
   text-align: center;  
}

IEで使いたいときは

残念ながらposition:stickyはIEに対応していません。代わりにstickyfillというライブラリを読み込むと利用できるようになります。

GitHubのページからzipファイルをダウンロードし、distフォルダにあるstickyfill.min.jsを使います。

JavaScript

先ほどHTML、CSSに記述した.stickyを利用します。異なるクラス名の場合は変更してください。

<script src="stickyfill.min.js"></script>
<script>
      var elements = document.querySelectorAll('.sticky'); Stickyfill.add(elements);
</scrip> 

jQuery

jQueryを利用するときは、別途jQueryのライブラリを忘れずに読み込んでください。

<script src="stickyfill.min.js"></script> 
<script>
    var elements = $('.sticky'); Stickyfill.add(elements); 
</script> 

今回は、position:stickyを使って追従メニューを作りました。IEの対応は不便ですが、代わりの方法が用意されていますし、Edgeは問題なく動作するので用途に合わせて取り入れるといいですね。

複数のメニューや見出しがあるときやパララックス効果を手軽に実装したいときには、ぜひ使ってみてください!