Question

我正在尝试将视差滚动合并到我的背景中，它相对于网页内容以较慢的速度移动。我一直在关注教程，但没有任何工作我被卡住了。这是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);

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。

使用background-attachment: fixed图像将不会移动，因为它就像属性所说的那样是固定的。它只是削减了。

新js略有不同，我使用了更多jQuery并更改了4 - ＆gt;所以它比以前滚动得慢。希望这就是你所要求的。

Answer 2

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

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

Working fiddle

视差滚动不起作用

2 个答案: