前記事の「疑似要素「::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>
