创建对象并传递元素时，未定义获取元素

Question

I am trying to create a js object as below

$(document).ready(function () {

  var stickySidebar = {
    element: this.element,
    topSpacings: 110,
    bottomSpacings: $(document).height() - (element.height() + element.offset().top),

    getElement: function () {
      return this.element;
    },

    setElement: function (elm) {
      element = elm;
    },

    makeSideBarSticky: function () {
      this.element.sticky({
        topSpacing: this.topSpacings,
        bottomSpacing: this.bottomSpacings,
        zIndex: 2
      });
    }

  }
  var stickySidebars = Object.create(stickySidebar );
  // var stickySidebars = stickySidebar($('#myElement'));
  stickySidebars.setElement($('#myElement'));
  stickySidebars.makeSideBarSticky();

});

However, I keep on getting element is not defined. I realize element is not defined. However, I am confused as to how I can pass in the element ($('#myElement')) and then call the function makeSideBarSticky. Can someone help me please?

Answer 1

You could create an empty div in your HTML document with id="myElement" , and then modify it via JS. This way element is defined for sure

Answer 2

You are assigning a value to the field. Object will not be created because there is an error while creating the object. Assign a value of null instead of this.element .

Answer 3

i dont know what is sticky() is that plugin that you didnt mention you use or something like that , but if we ignored this for a moment , try this :

$(document).ready(function () {

  var stickySidebar = {
    element: "",
    topSpacings: "",
    bottomSpacings: "",

    getElement: function () {
      return element;
    },

    setElement: function (elm) {
      element = elm;
      topSpacings= 110;
      bottomSpacings= $(document).height() - (element.height() + element.offset().top);
    },

    makeSideBarSticky: function () {
      element.sticky({
        topSpacing: topSpacings,
        bottomSpacing: bottomSpacings,
        zIndex: 2
      });
    }

  }
  var stickySidebars = Object.create(stickySidebar );
  // var stickySidebars = stickySidebar($('#myElement'));
  stickySidebars.setElement($('#myElement'));
  stickySidebars.makeSideBarSticky();

});