0

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

它适用于 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>
4

0 回答 0