2014-09-29 100 views
0

我在一页滚动网站上使用此代码的工作,但我已经将整个网址添加到href,如“href =”index.php#home“,而不是只使用。散列现在我的工作状态是不工作我如何修改这个代码,这个工作导航滚动突出显示

   //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"); 
        } 
       } 
      }); 

回答

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

});?

+0

这将是更好地打破注释掉的代码它将提供更好的可读性,您不必将所有代码放在一个大的部分中,也可以将其分解成多个部分。 – Madness 2015-08-05 03:19:05