탐색 스크롤 강조 표시

Question

나는이 코드를 작동하는 한 페이지 스크롤 사이트에서이 코드를 사용하고 있지만이 코드를 사용하는 대신 "href ="index.php # home "과 같은 href에 전체 URL을 추가했습니다. .. 해시 이제 내 활성 상태는 작동하려면이 코드를 수정할 수있는 방법 작동하지 않는

   //Navigation Scroll/Highlight 
      var aChildren = $(".nav li.link").children(); 
      var aArray = []; 
      for (var i=0; i < aChildren.length; i++) {  
       var aChild = aChildren[i]; 
       var ahref = $(aChild).attr('href'); 
       aArray.push(ahref); 
      } 

      $(window).scroll(function(){ 
       var windowPos = $(window).scrollTop() + 140; // 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]; 
        var divPos = $(theID).offset().top; // get the offset of the div from the top of page 
        var divHeight = $(theID).height(); // get the height of the div in question 
        if (windowPos >= divPos && windowPos < (divPos + divHeight)) { 
         $("a[href='" + theID + "']").addClass("nav-active"); 
        } else { 
         $("a[href='" + theID + "']").removeClass("nav-active"); 
        } 
       } 

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

Answer 1

$(document).ready(function(){ 

/** 
* This part does the "fixed navigation after scroll" functionality 
* We use the jQuery function scroll() to recalculate our variables as the 
* page is scrolled/ 
*/ 
$(window).scroll(function(){ 
    var window_top = $(window).scrollTop() + 12; // the "12" should equal the margin-top value for nav.stick 
    var div_top = $('#nav-anchor').offset().top; 
     if (window_top > div_top) { 
      $('nav').addClass('stick'); 
     } else { 
      $('nav').removeClass('stick'); 
     } 
}); 

/** 
* This part causes smooth scrolling using scrollto.js 
* We target all a tags inside the nav, and apply the scrollto.js to it. 
*/ 
$("nav 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 = $("nav 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]; 
     var divPos = $(theID).offset().top; // get the offset of the div from the top of page 
     var divHeight = $(theID).height(); // get the height of the div in question 
     if (windowPos >= divPos && windowPos < (divPos + divHeight)) { 
      $("a[href='" + theID + "']").addClass("nav-active"); 
     } else { 
      $("a[href='" + theID + "']").removeClass("nav-active"); 
     } 
    } 

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

});?