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/

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

Answer 1

我修改了你的第三个例子，这应该有效：

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

您的小提琴不包含jQuery，并且您的代码中存在语法错误。

小提琴：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（）返回一个元素数组。因此，您必须遍历每个元素并应用转换。

小提琴：modified example 1

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

1 个答案: