jQuery 및 scrollTo 플러그인이있는 Scrollspy

Question

저는 개발중인 웹 사이트에 ScrollSpy를 구현하려고합니다. 여기

내가 여기

Tutorial

그리고 데모 다음있어 튜토리얼의 링크입니다 :

Demo

내 요구에 자신의 스크립트를 적용하려고 해요을하지만, 계속 자바 스크립트에서 오류가 발생하면 콘솔에 "정의되지 않은 '최상위'속성을 읽을 수 없습니다."

여기

*/$(document).ready(function(){ 


$(".menu li a").click(function(evn){ 
    evn.preventDefault(); 
    $('html,body').scrollTo(this.hash, this.hash); 
}); 

/** 
* This part handles the highlighting functionality. 
* We use the scroll functionality again, some array creation and 
* manipulation, class adding and class removing, and conditional testing 
*/ 
var aChildren = $(".menu li").children(); // find the a children of the list items 
var aArray = []; // create the empty aArray 
for (var i=0; i < aChildren.length; i++) { 
    var aChild = aChildren[i]; 
    var ahref = $(aChild).attr('href'); 
    aArray.push(ahref); 
} // this for loop fills the aArray with attribute href values 

$(window).scroll(function(){ 
    var windowPos = $(window).scrollTop(); // get the offset of the window from the top of page 
    var windowHeight = $(window).height(); // get the height of the window 
    var docHeight = $(document).height(); 

    for (var i=0; i < aArray.length; i++) { 
     var theID = aArray[i]; 
     if (theID.length) { 
      var divPos = $(theID).offset().top; 
      var divHeight = $(theID).height(); // get the height of the div in question 
      if (windowPos >= divPos && windowPos < (divPos + divHeight)) { 
       $("a[href='" + theID + "']").parent().addClass("active"); 
      } else { 
       $("a[href='" + theID + "']").parent().removeClass("active"); 
      } 
     } 
    } 

    if(windowPos + windowHeight == docHeight) { 
     if (!$(".menu li:last-child a").hasClass("active")) { 
      var navActiveCurrent = $(".active").attr("href"); 
      $("a[href='" + navActiveCurrent + "']").removeClass("active"); 
      $(".menu li:last-child a").addClass("active"); 
     } 
    } 
}); }); 

내 자바 스크립트

그리고 난 여기 사람이 나를 도울 수

Web-Site

을 개발하고 있어요 웹 사이트입니까?

Answer 1

문제는 href를 jQuery의 선택기로 사용하고 있다는 것입니다.

for (var i=0; i < aArray.length; i++) { 
    var theID = aArray[i]; 
    if (theID.length) { 
     var divPos = $(theID).offset().top; 
     var divHeight = $(theID).height(); // get the height of the div in question 
     if (windowPos >= divPos && windowPos < (divPos + divHeight)) { 
      $("a[href='" + theID + "']").parent().addClass("active"); 
     } else { 
      $("a[href='" + theID + "']").parent().removeClass("active"); 
     } 
    } 
} 

대신해야한다 : 당신은 올바른 선택을 형성 할 필요가

for (var i=0; i < aArray.length; i++) { 
    var theID = aArray[i]; 
    var selector = "a[href='" + theID + "']"; 
    if (theID.length) { 
     var divPos = $(selector).offset().top; 
     var divHeight = $(selector).height(); // get the height of the div in question 
     if (windowPos >= divPos && windowPos < (divPos + divHeight)) { 
      $(selector).parent().addClass("active"); 
     } else { 
      $(selector).parent().removeClass("active"); 
     } 
    } 
}