kdcsライブラリー

前記事の「疑似要素「::before」を利用した画像固定」はスマホでも使えるが、1か所限定。
1枚の画像をずっと固定したままで動きがない。

今回試したのは「position: sticky;」スティッキー
例によってIEでは機能しないがスマホで使える。

Safariやios対策 -webkit-sticky display: blockまたはflexは必須
css

.inner { max-width: 1080px; margin: 0 auto; }

#content {
    margin: 0 auto;
    text-align: center;
}

.block {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
}
p {
  display: inline-block;
  font-size: 60px;
  font-family: 'Great Vibes', cursive;
  padding: 0;
  margin: 0;
}
img {
  width: 100%;
  height: auto;
}
.block-one {
  background: #212E32;
  color: #fff;
  z-index: 500;
}
.block-two {
  background: #85937A;
  z-index: 400;
}
.block-three {
  background: #212E32;
  color: #fff;
  z-index: 300;
}
.block-four {
  background: #85937A;
  z-index: 200;
}
.block-five {
  background: #212E32;
  color: #fff;
  z-index: 100;
}

html

<section>
<div id="content">
<div id="contentArea" class="inner clearfix">

  <div class="block block-one">
    <p>One</p>
  </div>
  <div class="block block-two">
    <div>Two<br><img src="./images/sample.jpg"></div>
  </div>
  <div class="block block-three">
    <p>Three</p>
  </div>
  <div class="block block-four">
    <p>Four</p>
  </div>
  <div class="block block-five">
    <p>Five</p>
  </div>

</div><!--/contentArea-->
</div><!--/content-->
</section>