我怎样才能使这个图像保持固定，而在滚动上消失

Question

我这里有一个网站…

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

当您滚动到底部附近时，您会看到一个.png莲花图像分层在带有字符的图像的顶部。然后你继续滚动，莲花图就会滚动掉。我想要的是莲花图像成为锁定的地方，当它的顶部达到窗口的顶部(当它在完美的全视图)。此时，滚动应该使它淡出，而不是移动。

我想我可以让它的位置:固定，然后使用jQ使它不可见，直到它到达正确的点，然后使它在滚动时褪色。

相关文字是mega simple…

<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

我相信这就是你想要的: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));
});

Answer 2

首先，您还应该在SO中发布您的javascript问题的完整性。

回答你的问题，是的，你可以改变你的图像的位置为固定时，图像的尖端触及顶部。当你滚动的时候，你可以改变不透明度，直到它完全不可见。