CSSのposition: stickyでスクロール固定｜背景画像の動きも比較できるサンプル

• ホーム
• Javascript,CSS,HTMLデザイン無料素材集
• CSSのposition: stickyでスクロール固定｜背景画像の動きも比較できるサンプル

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

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

<style>
  body{ margin:0; }
  .sticky > div{
    position:sticky;
    top:0px;     width:100%;
    height:80vh; font-size:30pt;
  }
  /* 1つ目のdiv */
  .sticky > div:nth-of-type(1){
    background:#ccccff;
  }
  /* 2つ目のdiv */
  .sticky > div:nth-of-type(2){
    background-image: url("/cg/sozai/sky/0001.jpg");
    background-repeat: no-repeat;  /* 繰り返さない */
    background-attachment: scroll; /* スクロールする */
    background-size: contain;
  }
  /* 3つ目のdiv */
  .sticky > div:nth-of-type(3){
    background-image: url(/cg/sozai/sky/0001.jpg); 
    background-repeat: no-repeat;  /* 繰り返さない */
    background-attachment: fixed;  /* スクロールしない */
    background-size: cover;
  }
  /* 4つ目のdiv */
  .sticky > div:nth-of-type(4){
    background: #ccccff;
  }
  /* 5つ目のdiv */
  .sticky > div:nth-of-type(5){
    background-image: url("/cg/sozai/texture/grass01.jpg");
    background-repeat: no-repeat;  /* 繰り返さない */
    background-attachment: fixed;  /*スクロールしない */
    background-size:cover;
  }
  /* 6つ目のdiv */
  .sticky > div:nth-of-type(6){
    background-image: url("/cg/sozai/texture/grass01.jpg"); 
    background-repeat: repeat;     /* 繰り返す */
    background-attachment: scroll; /* スクロールする */
    background-size: auto;
  }
</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>