遗漏的类型错误：无法读取的属性未定义顶部

-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代码

来源

2017-03-01 ivor

您用来定义'refElement'的选择器没有找到任何东西。我们不能提供更多的帮助，而不会看到相关的HTML –

您已将'refElement'设置为字符串（href）。在字符串上没有position（）方法等等。 – dschu

@dschu不，它不是。它被设置为一个jQuery对象。 –

由于并非所有的环节都有其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"); 
    } 
});

来源

2017-03-01 10:24:43

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

位置（）返回undefined，因此没有 “顶” 属性。答案：您的选择器正在导致错误。

为了解决这个问题，你可以测试是否refElement.position()是真实的，还是不undefined

检查了这一点：

$('woobaloobadubdub') 
Returns: [] 

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

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

来源

2017-03-01 10:12:41 dschu

'$（'woobaloobadubdub'）''返回'{...，length：0}'不是'[]'。 –

遗漏的类型错误：无法读取的属性未定义顶部

回答

相关问题