【CSS】position stickyでスクロールしても要素が親要素内で固定されるようにする

positionにはrelative,abusolute,fixedなどがありますが、今回はstickyについて解説します。

stickyとは？

fixedはもともと置かれた場所から除外され、画面左上を基準として固定されますが,stickyはもともと置かれた場所を離れずに、親要素に対して、top,bottom,left,rightに固定されます。

縦のスクロール

以下のデモを参照してください。ヘッダー、Sectionの見出し、profile、フッター部分が固定されています。

  <div class="sticky_contents">
    <div class="sticky_nav" >   //ヘッダー部分
        <img style="height: 100px;" src="../../images/PC/Programing/position_sticky/nav.jpg" alt="position sticky">
    </div>
    <div class="sticky_wrapper">
        <div class="sticky_main">  //mainの部分
            <div class="sticky_section">
                <p class="sticky_head">Section1</p>
                <p style="padding: 0 20px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit ex itaque vero similique magni illo iure perferendis, consequatur provident possimus reiciendis iusto eos necessitatibus inventore sequi incidunt ea. Adipisci, est.</p>
            </div>
            <div class="sticky_section">
                <p class="sticky_head">Section2</p>
                <p style="padding: 0 20px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit ex itaque vero similique magni illo iure perferendis, consequatur provident possimus reiciendis iusto eos necessitatibus inventore sequi incidunt ea. Adipisci, est.</p>
            </div>
            <div class="sticky_section">
                <p class="sticky_head">Section3</p>
                <p style="padding: 0 20px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit ex itaque vero similique magni illo iure perferendis, consequatur provident possimus reiciendis iusto eos necessitatibus inventore sequi incidunt ea. Adipisci, est.</p>
            </div>
            <div class="sticky_section">
                <p class="sticky_head">Section4</p>
                <p style="padding: 0 20px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit ex itaque vero similique magni illo iure perferendis, consequatur provident possimus reiciendis iusto eos necessitatibus inventore sequi incidunt ea. Adipisci, est.</p>
            </div>
            <div class="sticky_section">
                <p class="sticky_head">Section5</p>
                <p style="padding: 0 20px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit ex itaque vero similique magni illo iure perferendis, consequatur provident possimus reiciendis iusto eos necessitatibus inventore sequi incidunt ea. Adipisci, est.</p>
            </div>
        </div>
        <div class="sticky_aside">   //profileの部分
            <img src="../../images/PC/Programing/position_sticky/aside.jpg" alt="position sticky">
        </div>
    </div>
    <div class="sticky_footer">    //フッター部分
        <img class="sticky_sns" src="../../images/PC/Programing/position_sticky/sns.jpg" alt="position sticky">
    </div>
  </div> 

 /*  注：不必要な部分はカットしてあります。*/
  .sticky_nav{
      position: sticky;
      top: 0;
      height: 100px;
      width: 100%;
      margin: 0;
      z-index: 10;
  }
  .sticky_head{
      position: sticky;
      top: 105px;
  }
  .sticky_aside{
      width: 100%;
      margin: 0;
      flex: 1;
  }
  .sticky_aside img{
      position: sticky;
      top: 100px;
  }
  .sticky_footer{
      height: 40px;
      position: sticky;
      bottom: 0;
      background: #000;
  }

横のスクロール

横のスクロールはデモを参照してください。

まとめ

ヘッダーやフッターの固定や、サイドの注目してほしい記事にposition:sticky;を指定すると便利です。

縦のスクロールにはposition: sticky;に,top,bottomを指定できる。

横のスクロールにはposition: sticky;に,left,rightを指定できる。

親要素にoverflow:hiddenやautoがあるとstickyが効かなくなるので注意‼