CODEWITHSUNDEEP
javascriptjqueryscrollprototype
Emily Humphrey
Emily Humphrey

Reputation: 102

Creating a parallax object prototype with jQuery and I keep getting undefined errors on jQuery functions

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

I am trying to create a "parallax" prototype for multi scroll interactions on one page, but I keep getting "Uncaught TypeError: undefined is not a function" on line 12, 13, and 35. I am pretty new to Prototypes, but does jQuery not play nice with prototypes? I'm using other jquery code in other areas of it with no errors, only when I am interacting with the element.

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});

Thanks!

Upvotes: 0

Views: 773

Answers (1)

SteamDev
SteamDev

Reputation: 4404

A couple of things I would do here (working fiddle http://jsfiddle.net/z8upoccm/2/):

1.) It seems that the function is initializing on your jquery object as expected, but then again on regular DOM elements. Only allow jquery elements to pass through.

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

2.) You need units on your translate css property

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

Upvotes: 1

Related Questions