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

我相信这就是你想要的： DEMO

=> Errors prevented startup:                  

   While building the application:
   /Users/bliss/Downloads/demo-master/client/stylesheets/app.scss:4:9: Scss compiler error: file to import not found or unreadable:
   .meteor/local/build/programs/server/assets/packages/meteoric_ionic-sass/ionic
   Current dir: /Users/bliss/Downloads/demo-master/client/stylesheets/

Answer 2

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

要回答您的问题，是的，您可以在图像提示击中顶部时将图像的位置更改为固定。然后在滚动时，您可以更改不透明度，直到它变得完全不可见。

如何在滚动渐渐消失的同时使这个图像保持固定？

2 个答案: