In Fixed Header Uncaught TypeError oben undefined

Question

Ich mache feste Kopfzeile nach Fenster Scroll-Header sollte an der Spitze Ich behalte diesen Fehler Uncaught TypeError: Cannot read property 'top' of undefined Hier was könnte das Problem kann jemand lösen dies.

HTML:

<header id="masthead" class="site-header is-sticky"> 
    <div class="header-box">   
     <div class="header-left"> 
      <div class="logo"> 
       <a href="#" title="" alt=""> 
        <img src="images/logo-dark.png"> 
       </a> 
      </div><!-- .logo--> 
     </div><!-- .header-left--> 

     <div class="header-right"> 
      <div class="primary-menu"> 
       <ul class="sf-menu"> 
        <li class="current"><a href="#">Headers</a> 
         <ul> 
          <li><a href="Fixed-header.html">Fixed header</a></li> 
         </ul> 
        </li> 
        <li><a href="#">About Us</a></li> 
        <li><a href="#">Services</a></li> 
        <li><a href="#">Blog</a></li> 
        <li><a href="#">Contact Us</a></li> 
       </ul> 
      </div><!--primary menu--> 
     </div><!-- .header-right--> 
    </div><!-- .is-sticky--> 
</header> 

Code:

$(document).ready(function(){ 
var num = $('.site-header.is-sticky').offset().top; 
    $(window).bind('scroll', function() { 
     if ($(window).scrollTop() > num) { 
      $('.site-header.is-sticky').addClass('fixed-header'); 
      $('.logo').css({'padding':'5px 0'}); 
      $('.logo img').css({'transform':'scale(0.70)','transition':'all .3s ease-out','transform-origin':'left'}); 
      $('.topbar-wrap').hide(); 
     } 
     else { 
      num = $('.site-header.is-sticky').offset().top; 
      $('.site-header.is-sticky').removeClass('fixed-header'); 
      $('.logo').css({'padding':'20px 0'}); 
      $('.logo img').css({'transform':'scale(1)'}); 
      $('.topbar-wrap').show(); 
     } 
    }); 

dank Advanced.

Answer 1

Das DOM-Element kann nicht mit der angegebenen jquery gefunden werden, daher ein Fehler.

Meine Vermutung ist, dass durch die Klasse das Element immer nur es nicht findet, so wechseln ID und es wird aussortieren:

$(document).ready(function(){ 
var num = $('#masthead').offset().top; 
    $(window).bind('scroll', function() { 
     if ($(window).scrollTop() > num) { 
      $('.site-header.is-sticky').addClass('fixed-header'); 
      $('.logo').css({'padding':'5px 0'}); 
      $('.logo img').css({'transform':'scale(0.70)','transition':'all .3s ease-out','transform-origin':'left'}); 
      $('.topbar-wrap').hide(); 
     } 
     else { 
      num = $('.site-header.is-sticky').offset().top; 
      $('.site-header.is-sticky').removeClass('fixed-header'); 
      $('.logo').css({'padding':'20px 0'}); 
      $('.logo img').css({'transform':'scale(1)'}); 
      $('.topbar-wrap').show(); 
     } 
    }); 

Answer 2

Sie DOM-Element durch diese Art und Weise können auch anrufen: var num = $ ('. site-header.is-sticky: first-of-type') .offset().