javascript - Upgrading to jQuery 1.5 has broken my code -
i have following code make parallax niceness mapped scroll bar. moves both background position of section , elements in section classed "mover"
it works fine jquery 1.4.x when upgraded 1.5.2 elements don't quite original positions
does know changes in 1.5 cause this?
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:
<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>
Comments
Post a Comment