Active Anchor導航

Question

我的單頁網站目前平滑滾動到帶箭頭鍵的錨點。問題在於，當您滾動到每個部分時，徘徊的鏈接不會像每個部分一樣跟隨它。它只跟隨你的箭頭鍵命令。我該如何改變這一點？這是當前網站（http://www.jonasandnicole.com）

CSS

nav.desktop a { 
    padding-top:10px; 
    padding-bottom:10px; 
    text-align:right; 
    padding-right:20px; 
    color:#CCC; 
    -moz-transition: background 0.7s ease; 
    -ms-transition: background 0.7s ease; 
    -o-transition: background 0.7s ease; 
    -webkit-transition: background 0.7s ease; 
} 
nav.desktop a:hover { 
    background-color:rgba(0, 0, 0, 0.5); 
    color:#fff; 
} 
.selected { 
    background-color:rgba(0, 0, 0, 0.3); 
} 

jQuery的

<script src="js/jquery.easing.1.3.js"></script> 
<script> 
$(document).ready(function() { 
    $(".desktop a").click(function() { 
     $(".desktop a").removeClass("selected"); 
     $(this).addClass("selected"); 
    }); 
}); 
$(function() { 
    var lengthDiv = $('.desktop').find('li').length; 
    var current = 0; 
    $('a').bind('click',function(event){ 
     var $anchor = $(this); 
     current = $anchor.parent().index(); 

     $('html, body').stop().animate({ 
      scrollTop: $($anchor.attr('href#')).offset().top 
     }, 1500,'easeInOutExpo'); 
     /* 
     if you don't want to use the easing effects: 
     $('html, body').stop().animate({ 
      scrollTop: $($anchor.attr('href')).offset().top 
     }, 1000); 
     */ 
     event.preventDefault(); 
    }); 
    $(document).keydown(function(e){if($(':focus').length <= 0)e.preventDefault()}) 
    $(document).keyup(function(e){ 
     var key = e.keyCode; 
     if(key == 38 && current > 0){ 
      $('.desktop').children('li').eq(current - 1).children('a').trigger('click') 
     }else if(key == 40 && current < lengthDiv){ 
      $('.desktop').children('li').eq(current + 1).children('a').trigger('click') 
     } 
    }) 
}); 

</script> 

Answer 1

你想要做的是設置在窗口達到一定滾動點事件是什麼。您可以通過$ .scroll（）或使用庫如waypoints來做到這一點。作爲使用航點的示例：

$('#target').waypoint(function(dir)) { 
    $('nav <a> elements').removeClass('selected'); 
    switch(dir) { 
    case 'down': 
     $('corresponding <a> selector').addClass('selected'); 
     break; 
    case 'up': 
     $('previous <a> selector').addClass('selected'); 
    } 
} 

這將需要爲每個目標元素完成。