滚动到视口边缘时图像消失

Question

我们中的一些人想知道为什么本教程演示中的图像在触摸顶部后立即消失 - 在演示中的幻灯片3上缓慢滚动：

http://webdesigntutsplus.s3.amazonaws.com/tuts/338_parallax/src/index.html

我还没能弄明白。教程在这里： http://webdesign.tutsplus.com/tutorials/complete-websites/create-a-parallax-scrolling-website-using-stellar-js/

Answer 1

我找到了答案：它是stellar.js中的参数hideDistantElements。您需要将0更改为1，从而有效地禁用它。

参考：https://github.com/markdalgleish/stellar.js/issues/7

Answer 2

我遇到了同样的问题，而且对于性能我不想禁用hideDistantElements。

我注意到如果我滚动到他们的位置（他们通常会消失的地方）并重新加载页面，div将保持可见。如果这适用于您，请尝试以隐身模式打开页面，因为问题似乎出现在网站的缓存端。

我还将所有名为“scroll”的类的名称更改为唯一的名称，但是我不确定这会有什么不同，因为那时我注意到了缓存问题。

希望这有助于任何人，至少它对我有用。

Answer 3

我也有这个问题。 我注意到滚动的元素在一个特定的div之后就开始消失了 - 这个div与其他div之间的区别在于这个div有一个“float：none”css属性。

尝试将float: left添加到您正在滚动的div中。

编辑：此外，我发现如果您刷新页面并且您已经在页面的一半滚动，则会发生错误。 为了解决此问题，在实例化恒星

时添加responsive: true参数

Answer 4

在这里找到了作者的解决方案： https://github.com/markdalgleish/stellar.js-site/issues/1

无需隐藏远程元素。只需在css或html中设置div / image的尺寸。

Answer 5

设置div大小和恒星的选项对我没有帮助。 修复了使用background-attachment:initial;滚动div的问题。