jQueryを使用し、TOPへ戻るボタンの逆のような動きをさせたいです。
最初から画面中央に表示されている画像が、
一定数(レスポンシブなので画面上部から70%ほど)スクロールすると
フェードアウトして消える、という動きをさせたいです。
TOPへ戻るボタンの逆の発想でできないかと思っているのですが、
.scrollTopなどを使うとピクセル単位での読み込みになってしまったり、
そもそもjQueryがうまく動かず困っております。
HTML
1<div id="container"> 2 <div id="arrow"><img src="arrow.gif"></div> 3 <div class="maincontents"> 4 <div class="bg"><img src="bg.jpg"></div> 5~中略~ 6 <div class="image"><img src="iamge.jpg"></div> 7 </div> 8</div> 9
css
1#container { 2 width:100%; 3} 4 5#arrow img { 6 position: fixed ; 7 top: 0 ; 8 right: 0 ; 9 bottom: 0 ; 10 left: 0 ; 11 margin: auto ; 12 width:20%; 13 height:20%; 14} 15 16.bg img { 17 width: 100%; 18} 19 20.image img { 21 width: 100% ; 22}
arrowが常に中央に表示されており、image.jpgが表示される頃にはfadeOutで消したいイメージです。