縦方向に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>