2017-03-01 138 views
-1

我的代碼總是給我這個錯誤:遺漏的類型錯誤:無法讀取的屬性未定義頂部

Uncaught TypeError: Cannot read property 'top' of undefined

你能幫我解決這個問題?這裏是我的代碼:

function onScroll(event){ 
    var scrollPos = $(document).scrollTop(); 
    $('.header-body a').each(function() { 
     var currLink = $(this); 
     var refElement = $(currLink.attr("href")); 
     if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) { 
      $('.header-body a').removeClass("active"); 
      currLink.addClass("active"); 
     } else { 
      currLink.removeClass("active"); 
     } 
    }); 
} 

這裏的html代碼:

<!DOCTYPE html> 
    <html lang="{{ config('app.locale') }}"> 
     <head> 
      <meta charset="utf-8"> 
      <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
      <meta name="viewport" content="width=device-width, initial-scale=1" /> 
      <title>GPL Spring 2017</title> 
      <link rel="shortcut icon" type="image/x-icon" href="{{ URL::asset('favicon.ico') }}" /> 
      <link rel="stylesheet" href="{{ URL::asset('/css/main.css') }}" /> 
      <script type="text/javascript" src="{{ URL::asset('/js/jquery-1.11.2.min.js') }}"></script> 
      <script type="text/javascript" src="{{ URL::asset('/js/parallax.min.js') }}"></script> 
      <script type="text/javascript" src="{{ URL::asset('/js/jquery.scrollto.js') }}"></script> 
      <script type="text/javascript" src="{{ URL::asset('/js/main.js') }}"></script> 
     </head> 
     <body> 
     <header> 
      <div class="header-body"> 
       <a class="menu active" href="#container1">HOME</a> 
       <a class="menu" href="#container2">TICKETS</a> 
       <a class="menu" href="javascript:void(0)">EVENTS</a> 
       <a class="menu" href="javascript:void(0)">TEAM STANDINGS</a> 
       <a class="menu" href="javascript:void(0)">ARTICLES</a> 
       <a class="menu" href="javascript:void(0)">LIVE STREAM</a> 
      </div> 
     </header> 
    <div id="container1" class="parallax-container" data-parallax="scroll" data-position="top" data-bleed="10" data-image-src="{{ URL::asset('/images/content1.png') }}" data-natural-width="1350" data-natural-height="1093"> 
    <div class="content1-page"> 
     <img class="fade-in" src="{{ URL::asset('/images/logo.png') }}" /> 
     <br /> 
     <br /> 
     <div class="event-title"> 
      GARENA PREMIER LEAGUE SPRING 2017 
     </div> 
     <br /> 
     <div class="date-title"> 
      APRIL 12 - 16 
     </div> 
     <br /> 
     <br /> 
     <div class="location-title"> 
      LIVE EVENT: SAMSUNG HALL 
     </div> 
     <div id="demo"></div> 
     <br /> 
     <br /> 
     <div id="arrow" href="#container2"><img src="{{ URL::asset('/images/icon-arrow-dwn.png') }}" /></div> 
    </div> 
</div> 
<section> 
    <div id="container2" class="container-ticket"> 
     <div class="content2-page"> 
      <div class="ticket-title"> 
       TICKETS 
      </div> 
      <br /> 
      <div class="ticket-body"> 
       <div class="ticket-content1"> 
        <div class="ticket-text"> 
         <p> 
          I'm a paragraph. Click here to add your own text and edit me. It’s easy. Just click 「Edit Text」 or double click me to add your own content and make changes to the font. Feel free to drag and drop me anywhere you like on your page. I’m a great place for you to tell a story and let your users know a little more about you.​ 
         </p> 
         <p> 
          I'm a paragraph. Click here to add your own text and edit me. It’s easy. Just click 「Edit Text」 or double click me to add your own content and make changes to the font. Feel free to drag and drop me anywhere you like on your page. I’m a great place for you to tell a story and let your users know a little more about you. 
         </p> 
        </div> 
        <div id="tck-inc" onclick="inc()" class="ticket-btn-active"> 
         Ticket Inclusions 
        </div> 
        <div id="tck-out" class="ticket-btn"> 
         Ticket Outlets 
        </div> 
       </div> 
       <div class="ticket-content2"> 
        <div class="inclus"> 
         <p> 
          Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? 
         </p> 
         <p> 
          Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? 
         </p> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</section> 
@include('footer') 

抱歉,如果貼吧沒有HTML代碼

+0

您用來定義'refElement'的選擇器沒有找到任何東西。我們不能提供更多的幫助,而不會看到相關的HTML –

+0

您已將'refElement'設置爲字符串(href)。在字符串上沒有position()方法等等。 – dschu

+0

@dschu不,它不是。它被設置爲一個jQuery對象。 –

回答

1

由於並非所有的環節都有其href的值作爲一個有效的CSS選擇器,在訪問position之前,您必須檢查是否選擇了某項內容。試試這個:

$('.header-body a').each(function() { 
    var currLink = $(this); 
    var refElement = $(currLink.attr("href")); 

    if(!refElement.length) return; // if the length is 0 (nothing selected) skip the rest of this iteration where the accessing of the position happens 

    if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) { 
     $('.header-body a').removeClass("active"); 
     currLink.addClass("active"); 
    } else { 
     currLink.removeClass("active"); 
    } 
}); 
+0

哇...感謝的人...我仍然是JavaScript上的noob ...很好的幫助... – ivor

0

位置()返回undefined,因此沒有 「頂」 屬性。 答案:您的選擇器正在導致錯誤。

爲了解決這個問題,你可以測試是否refElement.position()是真實的,還是不undefined

檢查了這一點:

$('woobaloobadubdub') 
Returns: [] 

$('woobaloobadubdub').position() 
Returns: undefined 

$('woobaloobadubdub').position().top 
Returns: Uncaught TypeError: Cannot read property 'top' of undefined(…) 
+0

'$('woobaloobadubdub')''返回'{...,length:0}'不是'[]'。 –

相關問題