视差滚动不起作用答案

【问题标题】：Parallax Scrolling not working视差滚动不起作用
【发布时间】：2018-02-28 18:53:03
【问题描述】：

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

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

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

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

【问题讨论】：

也许你拼写的“document”没有额外的“e”。
检查你的控制台输出；你的代码有错误。
@Herohtar 没有错误..
@DanielBeck 哇，谢谢，但还是不行。
嗨莱德，请在您的问题中添加minimal reproducible example。就像现在一样，由于基于问题本身的内容不完整，它有被关闭的风险。（具体来说，JSFiddle 的链接很棒，但是我们要求您至少包含足够的代码，以便在 JSFiddle/CodePen 之类的网站出现故障和使问题变得无用/无法回答）。

标签： javascript css parallax

【解决方案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。

使用background-attachment: fixed 时，图像不会移动，因为正如酒店所说，它是固定的。刚刚剪掉了。

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

【讨论】：

【解决方案2】：

您的 CSS 语法有误，您只需在图片网址前添加 http://：

background-image: url(http://link);

Working fiddle

【讨论】：

谢谢！但我仍然需要帮助让它成为视差。