Warum kommen jQuery-Objekte undefiniert zurück?

Question

Ich versuche, den Wert meines Positionsattributs mit jquery zu erhalten. Aus irgendeinem Grund, wenn ich versuche, ein Element zu bekommen und seine Position anzuzeigen, kommt es unbestimmt zurück. Ich habe versucht, console.log ein paar verschiedene Elemente in Variablen als jquery Objekte gespeichert, und sie kommen undefined zurück. Scheint, als ob das für alle Elemente passiert, die ich versuche zu greifen.

Pen: 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

Sie haben zwei Tippfehler, es position nicht postition (74) oder var positon (78)