Javascript 升级到jQuery 1.5破坏了我的代码
我有下面的代码来制作一些映射到滚动条的视差。Javascript 升级到jQuery 1.5破坏了我的代码,javascript,jquery,jquery-1.5,Javascript,Jquery,Jquery 1.5,我有下面的代码来制作一些映射到滚动条的视差。 它移动节的背景位置和节分类移动器中的任何元素 它在jQuery1.4.x上运行良好,但是当我们升级到1.5.2时,元素并没有完全恢复到原来的位置 有人知道1.5中的哪些更改会导致这种情况吗 var lastScrollTop = 0 var scrollTop = 0 $(window).scroll(function() { scrollTop = $(window).scrollTop(); var move = las
它移动节的背景位置和节分类移动器中的任何元素 它在jQuery1.4.x上运行良好,但是当我们升级到1.5.2时,元素并没有完全恢复到原来的位置 有人知道1.5中的哪些更改会导致这种情况吗
var lastScrollTop = 0
var scrollTop = 0
$(window).scroll(function() {
scrollTop = $(window).scrollTop();
var move = lastScrollTop - scrollTop;
lastScrollTop = scrollTop;
$('.mover').each(function(i, element){
element = $(element);
if(!belowTheFold(element)){
var currentPos = parseInt(element.css("top"));
var speed = $(this).attr('data-scroll-speed');
var pos = currentPos + (move*speed);
element.css('top', pos);
}
});
$('.background-mover').each(function(i,element){
element = $(element);
if(!belowTheFold(element)){
var currentPos = parseInt(element.css("background-position-y"));
var speed = element.attr('data-scroll-speed');
var pos = currentPos + (move*speed);
element.css('background-position-y', pos);
}
});
});
function belowTheFold(element){
var fold = $(window).height() + $(window).scrollTop();
return fold <= element.offset().top;
}
HTML:
它同时移动了的背景位置,似乎您错过了添加代码语法。您在javascript控制台中是否有任何错误?控制台中没有任何错误。
<section class="background-mover" data-scroll-speed="0.1" style="background:url(images/background.jpg) no-repeat; /*background-size:cover;*/ ">
<a href="#" class="tag mover" data-scroll-speed="0.5" style="top:410px; left:120px; ">Places</a>
<a href="#" class="tag mover" data-scroll-speed="0.2" style="top:200px; left:480px; ">Nature</a>
<a href="#" class="tag mover" data-scroll-speed="0.3" style="top:350px; left:650px; ">Landscape</a>
<a href="#" class="tag mover" data-scroll-speed="0.8" style="top:580px; left:380px; ">Adventure</a>
</section>
<section class="background-mover" data-scroll-speed="0.2" style="background:url('images/background-2.jpg') no-repeat; height:630px; ">
<a href="#" class="tag mover" data-scroll-speed="0.2" style="top:250px; left:90px; ">Getting Around</a>
<a href="#" class="tag mover" data-scroll-speed="0.5" style="top:420px; left:500px; ">Events</a>
<a href="#" class="tag mover" data-scroll-speed="0.3" style="top:640px; left:470px; ">Accomodation</a>
</section>
<section class="background-mover" data-scroll-speed="0" style="background:url(images/background-3.jpg) no-repeat; /*background-size:cover;*/ height:1200px; ">
<a href="#" class="tag mover" data-scroll-speed="0.5" style="top:190px; left:300px; ">Culture</a>
<a href="#" class="tag mover" data-scroll-speed="0.1" style="top:390px; left:90px; ">Must Do's</a>
<a href="#" class="tag mover" data-scroll-speed="0.5" style="top:530px; left:600px; ">Getting Here</a>
<a href="#" class="tag mover" data-scroll-speed="0.2" style="top:680px; left:110px; ">History</a>
<a href="#" class="tag mover" data-scroll-speed="0.8" style="top:830px; left:590px; ">Facts</a>
</section>