我编写了一个脚本，当您向下滚动时会更改 BG 位置，它适用于左右位置，但我似乎无法达到允许我在背景位置顶部或底部视差的语法 - 而不是右侧然后离开了。
这是我的代码：
function parallax(){
var scrolled = $(window).scrollTop();
$('section.intro .custombg').css('background-position',(scrolled * -0.2) + 'px');}
$(window).scroll(function(e){
parallax();
});
}
【问题讨论】：
标签： javascript jquery css parallax
css 属性background-position 有两个值，#horizontal #vertical。
见：http://www.w3.org/wiki/CSS/Properties/background-position
考虑如下：
function parallax(){
var scrolledTop = $(window).scrollTop();
var scrolledLeft = $(window).scrollLeft();
$('section.intro .custombg').css('background-position',(scrolledLeft * -0.2) + 'px ' + (scrolledTop * -0.2) + 'px');}
$(window).scroll(function(e){
parallax();
});
}
此外，这似乎每次调用视差方法时都会添加滚动事件。要更正此问题，您可以尝试：
function parallax(top, left) {
$('section.intro .custombg').css('background-position',(left * -0.2) + 'px ' + (top * -0.2) + 'px');}
} // end function
$(document).ready(function() {
$(window).scroll(function(e) {
parallax($(window).scrollTop(), $(window).scrollLeft()); // call the method
});
});
【讨论】：
这都是错误的，每次使用 $(window).scroll() 时都在设置一个事件处理程序。你只需要这样做一次。试试这个。
var scrolledTop,
scrolledLeft,
background_position,
$custom_bg;
function parallax(){
scrolledTop = window.scrollY,
scrolledLeft = window.scrollX,
background_position = (scrolledLeft * -0.2) + 'px ' + (scrolledTop * -0.2) + 'px');
console.log('background_position', background_position);
$custom_bg.css('background-position', background_position);
}
$(function() {
$custom_bg = $('section.intro .custombg');
$(window).on('scroll', parallax);
});
【讨论】：
试试
function parallax(){
var scrolled = $(window).scrollTop();
$('section.intro .custombg').css('background-position','center ' + (scrolled * -0.2) + 'px');}
$(window).scroll(function(e){
parallax();
});
}
【讨论】：
如果您希望在视差方面做更多事情并更改其他属性，我强烈推荐 Skrollr 库 (https://github.com/Prinzhorn/skrollr)。
您可以在滚动时更改几乎任何 CSS 属性，从而为您提供更多选项，而不仅仅是背景位置或其他内容。它可能比您想要的要多，但它非常轻量级并且还具有移动支持（如果没有开发完善的库，您可能无法解释这一点）。希望对您有所帮助！
例如，如果您想改变背景图像的背景位置，您可以简单地执行以下操作： 初始化skrollr（本例中没有选项，但有参数可以设置）
<script type="text/javascript">
var s = skrollr.init();
</script>
然后，您可以使用简单的数据标签来告诉 Skrollr 您想要制作哪些元素以及您不想制作哪些元素。在你的情况下，你可以做一些模糊的事情，如下所示：
（无论你想在什么元素上使用视差）
<div data-0="background-color:rgb(0,0,255);transform[bounce]:rotate(0deg);" data-500="background-color:rgb(255,0,0);transform[bounce]:rotate(360deg);">
WOOOT
</div>
但是，您可以将背景颜色换成背景位置
<div data-0="background-position: 0px 0px" data-700="background-position: 0px 100px"> </div>
或
<div data-0="background-position: top center" data-700="background-position: bottom center"> </div>
您可以使用任何公认的 CSS background-position 关键字。
【讨论】：