为什么jQuery对象未定义？

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）或VAR positon（78）