我花了一整天的时间尝试创建一个视差部分,无论它放在页面上的哪个位置,它都能正常工作,但我对代码所做的每一次更改都会解决一个问题并产生另一个问题。到目前为止,这是我的代码:
(function( $ ) {
"use strict";
$('.parallax-section').each(function(){
var $el = $(this),
speed = 0.4,
elOffset = $el.offset().top;
$(window).scroll(function() {
var diff = $(window).scrollTop() - elOffset;
var yPos = -(diff*speed);
var coords = '50% '+ yPos + 'px';
$el.css({ backgroundPosition: coords });
});
});
}(jQuery));
The Css:
.parallax-section{
background-position: 50% auto;
background-repeat: no-repeat;
background-attachment: fixed;
background-image: url('http://lorempixel.com/1400/700')
}
这里有一个jsfiddle http://jsfiddle.net/yd457/1/关于这一点。在这里您将看到第一个视差部分跳转到上面代码设置的背景位置值,而页面下方的第二个视差部分工作正常。
我知道发生这种情况是因为上面的代码假设 elOffset 值大于scrollTop,而第一个代码的情况并非如此。
有人可以告诉我如何设置背景位置的初始值,这样就不会发生这种跳跃。
Thanks.
Update:在第一个视差部分上方添加了内容以正确显示跳跃。
为了确保不发生跳转,您真正需要做的就是确保以与滚动设置相同的方式设置初始值。
执行此操作的最佳方法是将代码移至滚动处理程序外部的函数中,然后在滚动处理程序中调用该函数。然后,您还可以在您需要的任何其他时间调用该函数……例如在页面加载时。
这是我将您的代码更改为:
(function ($) {
"use strict";
$('.parallax-section').each(function () {
var $el = $(this);
$(window).scroll(function () {
updateBackground($el);
});
updateBackground($el);
});
}(jQuery));
var speed = 0.4;
function updateBackground($el) {
var diff = $(window).scrollTop() - $el.offset().top;
var yPos = -(diff * speed);
var coords = '50% ' + yPos + 'px';
$el.css({
backgroundPosition: coords
});
}
See Demo http://jsfiddle.net/yd457/7/
基本上,updateBackground()
函数完成了滚动事件之前所做的所有工作。现在,在滚动时,我只需调用该函数,并向其传递所需的信息。
在此之下,我还立即调用该函数,这样它也将在页面加载时运行。
(请注意,我还移动了speed
外部变量.each()
,既是为了它可以被新函数更容易地引用,也是因为它不需要一遍又一遍地设置..它总是相同的,我们只需要声明它一次。)
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)