使 Javascript / JQuery 视差滑动效果适用于类

Question

我有以下脚本，并希望它也适用于类而不是仅适用于 id：

<script>
function parallax(){
var prlx_1 = document.getElementById('banner-welcome');
prlx_1.style.top = -(window.pageYOffset / 8)+'px';
}
window.addEventListener("scroll", parallax, false);
</script>

我已尝试执行以下操作，但它不起作用：

<script>
function parallax(){
var prlx_1 = document.getElementsByClassName('banners');
prlx_1.style.top = -(window.pageYOffset / 8)+'px';
}
window.addEventListener("scroll", parallax, false);
</script>

我也试过把它改成JQuery（至少我想我希望我这么做了），但也没用：

<script>
var prlx = $('.banners');
$(window).on('scroll', function () {
prlx.css({ 'top': -(window.pageYOffset / 8)+'px' });
});
});
</script>

这里有两个例子，一个有效，一个无效：

第一个示例有效： http://jsfiddle.net/ecb3744t/

第二个例子不起作用 http://jsfiddle.net/3mc4dcus/

第三个例子不起作用 http://jsfiddle.net/wvtqke36/

Answer 1

我已经修改了你的第三个例子，这应该可以工作：

var prlx = $('.banners');
$(window).on('scroll', function () {
    $(prlx).css({ 'top': -(window.pageYOffset / 2)+'px' }); 
});

您的 Fiddle 没有包含 jQuery 并且您的代码中存在语法错误。

Fiddle: modified example 3

如果你不想使用jQuery，那么使用这个代码：

function parallax(){
    var prlx = document.getElementsByClassName('banners');
    for(var i=0; i < prlx.length; i++) {
        var elem = prlx[i];
        elem.style.top = -(window.pageYOffset / 2)+'px';        
    }
}
window.addEventListener("scroll", parallax, false);

注意 document.getElementsByClassName() returns 一个元素数组。因此，您必须遍历每个元素并应用转换。

Fiddle: modified example 1

使 Javascript / JQuery 视差滑动效果适用于类

Make Javascript / JQuery parallax slide effect work for classes

javascript

jquery

scroll

parallax

使 Javascript / JQuery 视差滑动效果适用于 类

Make Javascript / JQuery parallax slide effect work for classes

javascript

jquery

scroll

parallax

使 Javascript / JQuery 视差滑动效果适用于类