视差背景定位滚动

Question

我刚刚开发了一个新的视差滚动脚本。我让它按照我想要的方式工作，但目前只有1个问题。

我希望脚本开始在默认情况下在css样式表中指定的y坐标处滚动背景图像。相反，我的脚本似乎在滚动图像之前将CSS y coord重置为0。这显然是不受欢迎的行为。

// Parallax scripting starts here
$.prototype.jpayParallax = function(userOptions){  

  var _api = {};

  _api.utils = {};

  _api.utils.isElementInViewport = function(el){
    if (typeof jQuery === "function" && el instanceof jQuery) {
      el = el[0];
    }

    var rect = el.getBoundingClientRect();

    return (
      rect.top >= 0 &&
      rect.left >= 0 &&
      rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $(window).height() */
      rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */
    );
  }

  _api.utils.debounceScrollWheel = (function(){
    $(function(){

      var $window = $(window);    //Window object

      var scrollTime = 0.3;     //Scroll time
      var scrollDistance = 50;    //Distance. Use smaller value for shorter scroll and greater value for longer scroll

      $window.on("mousewheel DOMMouseScroll", function(event){

        event.preventDefault(); 

        var delta = event.originalEvent.wheelDelta/120 || -event.originalEvent.detail/3;
        var scrollTop = $window.scrollTop();
        var finalScroll = scrollTop - parseInt(delta*scrollDistance);

        TweenMax.to($window, scrollTime, {
          scrollTo : { y: finalScroll, autoKill:true },
          ease: Power1.easeOut, //For more easing functions see http://api.greensock.com/js/com/greensock/easing/package-detail.html
          autoKill: true,
          overwrite: 5              
        });

      });

    });

  })();

  _api.selector = 'data-jpay-parallax';

  _api.methods = {};

  _api.methods.checkForVisibleParallaxEls = function(){

    $('['+_api.selector+']').each(function(){
      var instanceObject = $(this);
      var origBgPos = $(this).css('backgroundPosition').split(' ');
      var options = $(this).data('jpay-parallax');  
      console.log(origBgPos)
      if (_api.utils.isElementInViewport(instanceObject)){
        _api.methods.doParallax(instanceObject, options);
      }
    });
  }

  _api.methods.doParallax = function(instanceToManip, userOptions){
    var direction = userOptions.settings.direction;
    var orientation = userOptions.settings.orientation;
    var speed = userOptions.settings.speed;
    var type = userOptions.settings.type;
    var speedInt;
    var getSpeed = (function(){ 
      if (speed){
        switch(speed){
          case 'slow':
            speedInt = 10;
            break;
          case 'fast':
            speedInt = 5;
            break;
          case 'faster':
            speedInt = 1;
            break;
          default:
            throw new TypeError('Unknown speed parameter added to module instructions');
        }
      }
    })();
    var distToTopInt = function(){
      if (typeof speedInt === 'number'){
        return $(window).scrollTop()/speedInt;
      }
      else {
        return $(window).scrollTop();
      }
    }
    var origPos = instanceToManip.css('backgroundPosition').split(' ');
    var origPosX = parseInt(origPos[0]);
    var origPosY = parseInt(origPos[1]);
    var newPosY = origPosY += distToTopInt();
    var newPosX = origPosX += distToTopInt();

    if (orientation === 'vertical' && direction !== 'reverse'){
      instanceToManip.css('backgroundPositionY', newPosX+'px');
    }
    else if (orientation === 'vertical' && direction === 'reverse'){
      instanceToManip.css('backgroundPositionY', -newPosX+'px');
    }
    else if (orientation == 'horizontal' && direction !== 'reverse'){
      instanceToManip.css('backgroundPositionX', newPosX+'px');
    }
    else if (orientation == 'horizontal' && direction === 'reverse'){
      instanceToManip.css('backgroundPositionX', -newPosY+'px');
    }   
  }
  $(window).on('scroll', _api.methods.checkForVisibleParallaxEls)

};

$.fn.jpayParallax();

这是笔：

http://codepen.io/nicholasabrams/pen/OPxKXm/?editors=001

BONUS：当脚本永远不会访问它时，为什么这个脚本也会混淆css set backgroundSize属性？

我正在寻找建议，在脚本中缓存原始CSS背景图像y坐标值，以便它从那里增加而不是从每个实例的0px / 0开始。再次感谢您的帮助！