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

Question

好吧，所以我通过将所有内容从容器div "box"中取出并让java调用scrollbar data from (window)来修复平滑滚动问题，并通过添加-moz-transform而不是仅仅使用webkit来获得视差在firefox中工作，谢谢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将使图像始终显示在屏幕上