導航錨不正確應用活動類，而滾動jQuery

Question

我有一個網站，它有一個粘性導航放置在<header>元素的底部，只要我滾動到一個部分它使用data-attributes活躍一個類，這裏的錯誤是：當我滾動類active甚至上滾動並根據部分不滾動部分的一半補充道。

我想要的是打開active類，只要我得到每個部分的錨，我留下我的代碼下面跟着一個jsfiddle你可以看到什麼問題，我希望你們可以幫助我。

的HTML：

<header class="testheader"> 

    <nav id="cloud_nav" class="absolute"> 
      <ul> 
       <li><a href="#" data-scroll="overview">Section 1</a></li> 
       <li><a href="#" data-scroll="readiness">Section 2</a></li> 
       <li><a href="#" data-scroll="collaboration">Section 3</a></li> 
      </ul> 
    </nav> 

</header>  

<section data-anchor="overview" style="background: red; font-size: 25px;"> 

</section> 

<section data-anchor="readiness" style="background: green; font-size: 25px;"> 

</section> 

<section data-anchor="collaboration" style="background: #ccc; font-size: 25px;"> 
</section> 

</div> 

的Javascript：

<script type="text/javascript"> 
    // Sticky Nav 

$('#cloud_nav a').on('click', function() { 

    var scrollAnchor = $(this).attr('data-scroll'), 
     scrollPoint = $('section[data-anchor="' + scrollAnchor + '"]').offset().top; 

    $('body,html').animate({ 
     scrollTop: scrollPoint 
    }, 500); 

    return false; 

}) 

var navOffset = $('#cloud_nav').offset().top; 

$(window).scroll(function(){ 

    var scrollPos = $(window).scrollTop(); 


    if (scrollPos >= navOffset){ 
     $('#cloud_nav').removeClass('absolute'); 
     $('#cloud_nav').addClass('fixed_cloud_nav'); 
     $('section').each(function(i) { 
      if ($(this).position().top <= scrollPos - 50) { 
       $('#cloud_nav a.active').removeClass('active'); 
       $('#cloud_nav a').eq(i).addClass('active'); 
      } 
     }); 
    } else { 
     $('#cloud_nav').removeClass('fixed_cloud_nav'); 
     $('#cloud_nav').addClass('absolute'); 
     $('#cloud_nav a.active').removeClass('active'); 
     $('#cloud_nav a:first').addClass('active'); 
    } 
}); 
</script> 

小提琴：提前 http://jsfiddle.net/qfaeqo2w/

感謝，問候。

Answer 1

這是你所追求的？

http://jsfiddle.net/0ytvjtme/

首先，我改變計算scrollPoint考慮到的報頭的大小：

scrollPoint = $('section[data-anchor="' + scrollAnchor + '"]').offset().top - $('#cloud_nav').outerHeight(); 

然後，而非減法 50個像素，我們添加的高度的資產淨值，其中它的檢測滾動位置：

if ($(this).position().top <= scrollPos + $('#cloud_nav').outerHeight()) 

錨點現在滾動到正確的位置，活動類看起來正確切換。