CSSのposition:stickyを使ってスクロール位置に応じて要素を固定表示する

CSSのposition:stickyを使ってスクロール位置に応じて要素を固定表示する


縦方向にposition:stickyを適用した例

以下のインラインフレームを上下にスクロールすると、DIVタグ内がスクロールに応じて上の位置に固定されるようにスクロールします。

<style>
  body{ margin:0; }
  .sticky > div{
    position:sticky;
    top:0px;     width:100%;
    height:80vh; font-size:30pt;
  }
  /* 1つ目、4つ目のdiv */
  .sticky > div:nth-of-type(3n+1){
    background:#ccccff;
  }
  /* 2つ目、5つ目のdiv */
  .sticky > div:nth-of-type(3n+2){
    background:#ccffcc;
  }
  /* 3つ目、6つ目のdiv */
  .sticky > div:nth-of-type(3n){
    background:#ffcccc;
  }
</style>

<div class="sticky">
  <div>1つ目のdiv</div>
  <div>2つ目のdiv</div>
  <div>3つ目のdiv</div>
  <div>4つ目のdiv</div>
  <div>5つ目のdiv</div>
  <div>6つ目のdiv</div>
</div>

横方向にposition:stickyを適用した例

以下のインラインフレームを左右にスクロールすると、DIVタグ内がスクロールに応じて左の位置に固定されるようにスクロールします。

<style>
  body{ margin:0; }
  .sticky{
    display:flex;  width:400%;
  }
  .sticky > div{
    position:sticky;
    left:0px;      width:100%;
    height:100vh;  font-size:30pt;
  }
  /* 1つ目、4つ目のdiv */
  .sticky > div:nth-of-type(3n+1){
    background:#ccccff;
  }
  /* 2つ目、5つ目のdiv */
  .sticky > div:nth-of-type(3n+2){
    background:#ccffcc;
  }
  /* 3つ目、6つ目のdiv */
  .sticky > div:nth-of-type(3n){
    background:#ffcccc;
  }
</style>

<div class="sticky">
  <div>1つ目のdiv</div>
  <div>2つ目のdiv</div>
  <div>3つ目のdiv</div>
  <div>4つ目のdiv</div>
  <div>5つ目のdiv</div>
  <div>6つ目のdiv</div>
</div>




Mam's WebSite