Question

我试图用jquery获取我的position属性的值。出于某种原因，当我尝试获取元素并显示其位置时，它将返回未定义。我已经尝试将console.log作为jquery对象存储在变量中的一些不同元素，并且它们将返回undefined。似乎这种情况正在发生在我试图抓住的所有元素上。

笔：https://codepen.io/marti2221/pen/QgXoMr

// two functions, one changes to fixed 


var windw = this;

/*

//this one switches to fixed

$.fn.startFixed = function ( pos ) {
    var $this = this,
        $window = $(windw);
    
    $window.scroll(function(e){
        if ($window.scrollTop() > pos) {
            $this.css({
                position: 'fixed',
                top: pos
            });
        } else {
            $this.css({
                position: 'absolute',
                top: pos + 200
            });
        }
    });
};

*/

// this one switches to absolute

$.fn.followTo = function ( pos ) {
    var $this = this,
        $window = $(windw);
    
    $window.scroll(function(e){
        if ($window.scrollTop() > pos) {
            $this.css({
                position: 'absolute',
                top: pos
            });
        } else {
            $this.css({
                position: 'fixed',
                top: 0
            });
        }
    });
};


// playing with some values for switch positions


var asideHeight = $(".aside").height();
var stopPoint = asideHeight - 303;
var aside2Height = $("#aside2").height();
var secondStart = asideHeight + $(window).height();
var secondStop = 555;
var viewPortHeight = $(window).height();

$('.container-text').followTo(stopPoint);


/*

// trying to put jquery objects in variables but coming back undefined in console

var lastFixed = $("#lastFixed");
var fixedPos = lastFixed.position();

var secondFix = $("#section2");
var secondPos = secondFix.postition();

// undefined, why??

console.log(asideHeight);
console.log(aside2Height);
console.log(viewPortHeight);
console.log(stopPoint);
console.log(windw);
console.log(secondStart);
console.log(secondFix);  
console.log(secondPos);
*/

* {
  box-sizing:border-box;
  margin: 0;
}

section {
  width: 100%;  
  margin: auto;
  display: flex;
  background: gray;
}

section:nth-child(even) main {
  order: -1;
}

aside,main {
  flex: 1 0 50%;
}

aside{
  flex: 0 0 50%;
    justify-content: center;
  background: #eee;
}

main {
  position: relative;
  color: white;
}

aside,.inner {
  padding: .5em;
}


.container-content{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

article {
  width: 75%;
  margin: 75px;
}

.container-text{
    position: fixed;
}

#section2 {
  position: absolute;
  top: 1000;
}
#section3 {
  position: absolute;
}
#lastFixed {
  position: absolute;
}

<section>
      <aside class="aside">
        <div class="container-text">
          <header class="hello">Hello</header>
          <div class="container-nav">
            <p class="how">How</p>
            <p class="are">are</p>
            <p class="you">you</p>
          </div>
        </div>
      </aside>
      <main class="main">
          <div class="container-content">
              <h1>First heading</h1>
              <article>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra enim sagittis velit iaculis, a consectetur nisi sagittis. Etiam sagittis enim sapien, in ultricies nibh maximus quis. Nulla facilisi. Ut mattis gravida semper. Nam nec lacinia nulla. Proin euismod dolor lacus, id sagittis sem viverra accumsan. Curabitur eros est, vehicula vel nibh eget, gravida porttitor turpis. Vivamus a sollicitudin nisl.
              </article>
              <h1>Second heading</h1>
              <article>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra enim sagittis velit iaculis, a consectetur nisi sagittis. Etiam sagittis enim sapien, in ultricies nibh maximus quis. Nulla facilisi. Ut mattis gravida semper. Nam nec lacinia nulla. Proin euismod dolor lacus, id sagittis sem viverra accumsan. Curabitur eros est, vehicula vel nibh eget, gravida porttitor turpis. Vivamus a sollicitudin nisl. Etiam sagittis enim sapien, in Nulla facilisi. Etiam sagittis enim sapien, in ultricies nibh maximus quis. Nulla facilisi.
              </article>
              <h1>Third heading</h1>
              <article>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra enim sagittis velit iaculis, a consectetur nisi sagittis. Etiam sagittis enim sapien, in ultricies nibh maximus quis. Nulla facilisi. Ut mattis gravida semper. Nam nec lacinia nulla. Proin euismod dolor lacus, id sagittis sem viverra accumsan. Curabitur eros est, vehicula vel nibh eget, gravida porttitor turpis. Vivamus a sollicitudin nisl.
              </article>
              <h1>Fourth heading</h1>
              <article>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra enim sagittis velit iaculis, a consectetur nisi sagittis. Etiam sagittis enim sapien, in ultricies nibh maximus quis. Nulla facilisi. Ut mattis gravida semper. Nam nec lacinia nulla. Proin euismod dolor lacus, id sagittis sem viverra accumsan. Curabitur eros est, vehicula vel nibh eget, gravida porttitor turpis. Vivamus a sollicitudin nisl.
              </article>
            </div>
        </main>
    </section>

Answer 1

你有两个拼写错误，position不是postition（74）或变种positon（78）

为什么jquery对象未定义？

1 个答案: