视差效果干扰平滑滚动效果

Question

好的，所以我通过将所有内容从容器 div“框”中取出并从（窗口）调用 java 调用滚动条数据来解决平滑滚动问题——并通过添加使视差在 firefox 中工作-moz-transform 而不是只使用 webkit，谢谢 ahren –

我一直致力于重新设计网络标签以产生视差效果。这是我到目前为止所做的链接：

http://www.sasparillarootcoyote.com/parallax_experiment/index2.html（链接不可用）

我已经让视差效果完全按照我想要的方式工作，却发现它在 Firefox 中根本不起作用。任何人都知道如何在不使用完全不同的方法来创建视差效果的情况下解决此问题？

这是视差脚本——我使用的是 JQuery 8.1.3

<script>

    $(document).ready(function () {

        $("#box").scroll(function () {
            s = $("#box").scrollTop();
            $("#hideedges").css("-webkit-transform","translateY(" +  (s/1)  + "px)");
            $("#thumb1").css("-webkit-transform","translateY(" +  (s/1.6)  + "px)");
            $("#thumb2").css("-webkit-transform","translateY(" +  (s/2)  + "px)");
            $("#thumb3").css("-webkit-transform","translateY(" +  (s/4)  + "px)");
            $("#thumb4").css("-webkit-transform","translateY(" +  (s/24)  + "px)");
            $("#thumb5").css("-webkit-transform","translateY(" +  (s/50)  + "px)");
            $("#thumb6").css("-webkit-transform","translateY(" +  (s/16)  + "px)");
            $("#thumb7").css("-webkit-transform","translateY(" +  (s/24)  + "px)");
            $("#thumb8").css("-webkit-transform","translateY(" +  (s/9)  + "px)");
            $("#thumb9").css("-webkit-transform","translateY(" +  (s/3)  + "px)");
            $("#thumb10").css("-webkit-transform","translateY(" +  (s/44)  + "px)");
            $("#thumb11").css("-webkit-transform","translateY(" +  (s/9)  + "px)");
            $("#thumb12").css("-webkit-transform","translateY(" +  (s/500)  + "px)");
            $("#thumb13").css("-webkit-transform","translateY(" +  (s/24)  + "px)");
            $("#thumbcolor13").css("-webkit-transform","translateY(" +  (s/1.6)  + "px)");
            $("#thumbcolor1").css("-webkit-transform","translateY(" +  (s/2)  + "px)");
            $("#thumbcolor2").css("-webkit-transform","translateY(" +  (s/4)  + "px)");
            $("#thumbcolor3").css("-webkit-transform","translateY(" +  (s/24)  + "px)");
            $("#thumbcolor4").css("-webkit-transform","translateY(" +  (s/50)  + "px)");
            $("#thumbcolor5").css("-webkit-transform","translateY(" +  (s/16)  + "px)");
            $("#thumbcolor6").css("-webkit-transform","translateY(" +  (s/24)  + "px)");
            $("#thumbcolor7").css("-webkit-transform","translateY(" +  (s/9)  + "px)");
            $("#thumbcolor8").css("-webkit-transform","translateY(" +  (s/100)  + "px)");
            $("#thumbcolor9").css("-webkit-transform","translateY(" +  (s/44)  + "px)");
            $("#thumbcolor10").css("-webkit-transform","translateY(" +  (s/9)  + "px)");
            $("#thumbcolor11").css("-webkit-transform","translateY(" +  (s/500)  + "px)");
            $("#thumbcolor12").css("-webkit-transform","translateY(" +  (s/24)  + "px)");

        })

    })

</script>

感谢大家的帮助

Answer 1

添加

position: fixed;
top: 0;

到您的#one img 将始终将图像保留在屏幕上。