Question

好的，所以我通过从容器div“框”中取出所有内容并从（窗口）获取java调用滚动条数据来修复平滑滚动问题 - 并通过添加在Firefox中获得视差-moz-transform而不仅仅是使用webkit，谢谢啊 -

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

~~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会一直将图像保留在屏幕上。

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

1 个答案: