固定された位置付けされた画像は、あるdiv内に表示されます。

Question

固定された位置に複数の画像がありますが、これらの画像はすべてコンテンツが同じである必要があります。ページをスクロールします。

私はこのインスピレーションを得た例がありましたが、もう一度それを見つけることができません。申し訳ありません。

編集：申し訳ありませんコードを忘れて、段落はスクロールをテストするだけのプレースホルダです。

イメージが固定された位置を持っているだけで、彼らはしているのdivに表示されている必要があり

<div id="Over"> 
<div id="Job" class="grey"> 
    <p>Blalbalblablalbalbalblbalbalab</p> 
    <p>Blalbalblablalbalbalblbalbalab</p> 
    <p>Blalbalblablalbalbalblbalbalab</p> 
    <p>Blalbalblablalbalbalblbalbalab</p> 
    <p>Blalbalblablalbalbalblbalbalab</p> 
    <p>Blalbalblablalbalbalblbalbalab</p> 
    <p>Blalbalblablalbalbalblbalbalab</p> 
    <p>Blalbalblablalbalbalblbalbalab</p> 

    <p>Blalbalblablalbalbalblbalbalab</p> 
    v 
    <p>Blalbalblablalbalbalblbalbalab</p> 

    <p>Blalbalblablalbalbalblbalbalab</p> 
    <p>Blalbalblablalbalbalblbalbalab</p> 
    <p>Blalbalblablalbalbalblbalbalab</p> 
    <p>Blalbalblablalbalbalblbalbalab</p> 
    <p>Blalbalblablalbalbalblbalbalab</p> 
    <p>Blalbalblablalbalbalblbalbalab</p> 
    v 
    <p>Blalbalblablalbalbalblbalbalab</p> 
    <p>Blalbalblablalbalbalblbalbalab</p> 
    <img class="changing" id="JobImage" src="~/images/JobRapati.png" /> 
</div> 
<div id="Web"> 
    <p>Blalbalblablalbalbalblbalbalab</p> 
    <p>Blalbalblablalbalbalblbalbalab</p> 
    <p>Blalbalblablalbalbalblbalbalab</p> 
    <p>Blalbalblablalbalbalblbalbalab</p> 
    <p>Blalbalblablalbalbalblbalbalab</p> 
    <p>Blalbalblablalbalbalblbalbalab</p> 
    <p>Blalbalblablalbalbalblbalbalab</p> 

    <p>Blalbalblablalbalbalblbalbalab</p> 
    <p>Blalbalblablalbalbalblbalbalab</p> 
    <p>Blalbalblablalbalbalblbalbalab</p> 
    <p>Blalbalblablalbalbalblbalbalab</p> 
    <p>Blalbalblablalbalbalblbalbalab</p> 
    <p>Blalbalblablalbalbalblbalbalab</p> 
    <p>Blalbalblablalbalbalblbalbalab</p> 
    <p>Blalbalblablalbalbalblbalbalab</p> 
    <p>Blalbalblablalbalbalblbalbalab</p> 

    <p>Blalbalblablalbalbalblbalbalab</p> 
    <p>Blalbalblablalbalbalblbalbalab</p> 
    <img class="changing" id="WebImage" src="~/images/webdev.png" /> 
</div> 
<div id="Game" class="grey"> 
    <p>Blalbalblablalbalbalblbalbalab</p> 
    <p>Blalbalblablalbalbalblbalbalab</p> 
    <p>Blalbalblablalbalbalblbalbalab</p> 
    <p>Blalbalblablalbalbalblbalbalab</p> 
    <p>Blalbalblablalbalbalblbalbalab</p> 
    <p>Blalbalblablalbalbalblbalbalab</p> 
    <p>Blalbalblablalbalbalblbalbalab</p> 

    <p>Blalbalblablalbalbalblbalbalab</p> 
    <p>Blalbalblablalbalbalblbalbalab</p> 
    <p>Blalbalblablalbalbalblbalbalab</p> 
    <p>Blalbalblablalbalbalblbalbalab</p> 
    <p>Blalbalblablalbalbalblbalbalab</p> 
    <p>Blalbalblablalbalbalblbalbalab</p> 
    <p>Blalbalblablalbalbalblbalbalab</p> 
    <p>Blalbalblablalbalbalblbalbalab</p> 
    <p>Blalbalblablalbalbalblbalbalab</p> 

    <p>Blalbalblablalbalbalblbalbalab</p> 
    <p>Blalbalblablalbalbalblbalbalab</p> 
    <img class="changing" id="GameImage" src="~/images/Unity_logo.png" /> 
</div> 
<div id="App"> 
    <p>Blalbalblablalbalbalblbalbalab</p> 
    <p>Blalbalblablalbalbalblbalbalab</p> 
    <p>Blalbalblablalbalbalblbalbalab</p> 
    <p>Blalbalblablalbalbalblbalbalab</p> 
    <p>Blalbalblablalbalbalblbalbalab</p> 
    <p>Blalbalblablalbalbalblbalbalab</p> 
    <p>Blalbalblablalbalbalblbalbalab</p> 

    <p>Blalbalblablalbalbalblbalbalab</p> 
    <p>Blalbalblablalbalbalblbalbalab</p> 
    <p>Blalbalblablalbalbalblbalbalab</p> 
    <p>Blalbalblablalbalbalblbalbalab</p> 
    <p>Blalbalblablalbalbalblbalbalab</p> 
    <p>Blalbalblablalbalbalblbalbalab</p> 
    <p>Blalbalblablalbalbalblbalbalab</p> 
    <p>Blalbalblablalbalbalblbalbalab</p> 
    <p>Blalbalblablalbalbalblbalbalab</p> 

    <p>Blalbalblablalbalbalblbalbalab</p> 
    <p>Blalbalblablalbalbalblbalbalab</p> 
    <img class="changing" id="AppImage" src="~/images/SummStats.png" /> 
</div> 

CSS：。

.changing 
{ 
position: fixed; 
right: 0; 
top: 30%; 
} 

Answer 1

私は100％わからないんだけど質問がありましたが、私はあなたが何をしているのかについて些細な解決策はないと思います。あなたはちょっとハックする必要があります。

私はあなたのためのcodepenを作った。それはこれのようなものですか？

html, body { 
    width: 100%; 
    height: 200%; 
    margin: 0; 
} 

.container { 
    z-index: 2; 
    width: 100%; 
    margin-top: 200px; 
    height: 100%; 
    background-color: red; 
} 

.img { 
    position: fixed; 
    z-index: -1; 
    top: 30px; 
    left: 20px; 
    width: 50px; 
    height: 50px; 
    background-color: aquamarine; 
} 

そしてHTML

<div class="img"></div> 
<div class="container"></div> 

https://codepen.io/montik/pen/JExLRW