javascript - 视差滚动不起作用

Question

我正在尝试将视差滚动合并到我的背景中，它相对于网页内容以较慢的速度移动。我一直在关注教程，但没有任何效果，我被卡住了。这是 jsfiddle - https://jsfiddle.net/batLeeyw/24/

这是javascript。抱歉，我有很多 html/CSS，所以我会把它留在 fiddle 链接中。我的背景图片也没有出现在 fiddle 中，但是当它应该在浏览器中出现视差时它是静态的。

function parallax(){
            var para = document.getElementById("parallax-layer");
            para.style.top = -(window.pageYOffset / 4)+"px";
        }

        window.addEventListener("scroll", parallax, false);

Answer 1

我不确定你的目标到底是什么，但试试这个:

删除:

background-attachment: fixed;

来自 css 中的 #parallax-layer id。将您的 js 更改为:

function parallax(){
         var newtop = (window.pageYOffset / 2);
         $("#parallax-layer").css({top: newtop + 'px'});
         }

window.addEventListener("scroll", parallax, false);

查看结果here在 fiddle 中。

使用 background-attachment: fixed 图像不会移动，因为正如属性所说，它是固定的。它刚刚被切割。

新的 js 只是有点不同，我使用了更多的 jQuery 并更改了 4 -> 2。因此它的滚动速度比以前慢了。希望这就是您所要求的。