升级到jQuery 1.5已经破坏了我的代码

时间:2011-04-12 03:06:10

标签: javascript jquery jquery-1.5

我有以下代码来制作一些映射到滚动条的视差。 它移动该部分的背景位置和“mover”部分中的任何元素

它适用于jQuery 1.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:

  <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>

0 个答案:

没有答案