如何在滾動時消失的同時保持圖像不變？

Question

我這裏有一個網站...

http://matiny.tk/warframe/about/index.html

滾動時接近底部，可以看到鋪在上面有字符的圖像的頂部爲.png蓮花圖像。然後你繼續滾動，蓮花圖片滾動。我想要的是蓮花圖像在頂部到達窗口頂部時（當它處於完美的全景視圖中）時，它會鎖定在原位。在這一點上，滾動應該使其褪色，而不是移動。

我在想我可能會把它定位：固定然後用jQ使它不可見，直到它到達正確的點，然後使其淡入滾動。

中的有關內容的大型簡單...

<div class="char-div"> 
    <img src="http://matiny.tk/warframe/about/lotus.png" alt="" class="lotus"/> 
</div> 


.char-div { 
    position: relative; 
    background-image: url(http://matiny.tk/warframe/about/chars.jpg); 
    background-size: cover; 
    background-position: center center; 
    background-attachment: fixed; 
    height: 1500px; 
} 

.lotus { 
    width: 100%; 
    position: absolute; 
    top: 0; 
} 

Answer 1

首先，你還應該張貼您的JavaScript在這裏讓你的問題的完整性。

要回答你的問題，是的，你可以改變你的圖像的位置，以固定圖像提示點擊頂部。然後當您滾動時，您可以更改不透明度，直到它完全不可見。

Answer 2

我相信這是你想要的：DEMO

var lotusFirstPosition=$('.lotus').offset().top; 
var currentPosition; 
var fadingDuration=400; // the duration it will take to fade the element 
var OPI=1/fadingDuration; // Opacity Per Inch 
$(document).scroll(function(){ 
    if($('.lotus').offset().top<=$(document).scrollTop()){ 
     currentPosition=$(document).scrollTop(); 
     $('.lotus').css('top',$(document).scrollTop()+'px'); 
    } 
    else if(currentPosition>=lotusFirstPosition){ 
     currentPosition=$(document).scrollTop(); 
     $('.lotus').css('top',$(document).scrollTop()+'px'); 
    } 
    else{ 
     $('.lotus').css('top',lotusFirstPosition+'px'); 
    } 
    $('.lotus').css('opacity',1-((currentPosition-lotusFirstPosition)*OPI)); 
});