javascript - 使用 jQuery 创建视差对象原型(prototype)，我不断收到 jQuery 函数的未定义错误

Question

fiddle http://jsfiddle.net/chdhmphry/z8upoccm/

我正在尝试为一页上的多滚动交互创建一个“视差”原型(prototype)，但我在第 12、13 和 35 行不断收到“未捕获的类型错误:未定义不是函数”。我对原型(prototype)还很陌生。 ，但是 jQuery 不能很好地处理原型(prototype)吗？仅当我与元素交互时，我在它的其他区域使用其他 jquery 代码，没有错误。

Object.prototype.parallax = function(userOptions){

  // Default info
  var options = {
    speed: 6,
    direction: "down"
  };
  options = $.extend( options, userOptions );

  // Element info
  var element = this;
  var startPoint = element.position().top;
  var endPoint = element.position().top + element.height();

  // Scroll info
  var scrollPos = {
    top: $(window).scrollTop(),
    bottom: $(window).scrollTop() + $(window).height()
  };

  // first call
  scrolling();

  // call on scroll
  $(window).on("scroll", function(){
    scrolling();
  });

  function scrolling(){
    scrollPos = {
      top: $(window).scrollTop(),
      bottom: $(window).scrollTop() + $(window).height()
    };

    element.css({"transform": "translateY("+(scrollPos.top - startPoint)+")"});

  }
};

$("#js-new-title-stuck-3").parallax({speed:2});

谢谢!

Answer 1

我在这里要做的几件事(工作 fiddle http://jsfiddle.net/z8upoccm/2/ ):

1.) 该函数似乎按预期在 jquery 对象上初始化，但随后又在常规 DOM 元素上初始化。只允许jquery元素通过。

Object.prototype.parallax = function(userOptions){
  if(!this.jquery) return false;

2.) 您的 CSS 翻译属性需要单位

element.css({"transform": "translateY("+(scrollPos.top - startPoint)+"px)"});