視差效果會干擾平滑的滾動效果

Question

好的，所以我通過從容器div“框”中取出所有內容並從（窗口）中調用java滾動條數據來解決了平滑滾動的問題，並通過添加-moz-transform而不是在firefox中使視差工作只是使用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會一直將圖像保留在屏幕上。