Fixed Header Uncaught TypeError top undefined

Question

ウィンドウのスクロールヘッダーを上部に固定した後に固定ヘッダーを作成しています このエラーが発生し続けるUncaught TypeError: Cannot read property 'top' of undefined ここで問題が解決する可能性があります。

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> 

コード：アドバンスで

$(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(); 
     } 
    }); 

感謝。

Answer 1

指定されたjqueryを使用してDOM要素を見つけることができないため、エラーになります。

私の推測では、クラスで要素を取得するだけでそれを見つけるので、IDに切り替えて、それが整理されますしないことです：

$(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

あなたがこの方法でDOM要素を呼び出すことができます。 のvar NUM = $（ '。site-header.is-sticky：first-of-type'）。offset（）。