Javascript 导航锚不'；滚动jQuery时无法正确应用活动类

我有一个网站，它在

元素的底部有一个粘性导航，只要我滚动到一个部分，它就会使用

数据属性激活一个类，这里的错误是：当我滚动类
时，活动的
会在该部分的一半上添加内容，即使滚动不根据该部分滚动

我想要的是打开
active
类，只要我得到了每个部分的锚，我会在下面留下我的代码，后面是一个JSFIDLE，你可以看到问题出在哪里，我希望你们能帮助我

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>


//粘性导航
$（'cloud#u nav a'）。在（'click'，function（）上{
var scrollAnchor=$（this）.attr（'data-scroll'），
scrollPoint=$（'section[data-anchor=“”+scrollAnchor+'“]'））.offset（）.top；
$（'body，html'）。设置动画({
scrollTop:scrollPoint
}, 500);
返回false；
})
var navOffset=$（'#cloud_nav'）.offset（）.top；
$（窗口）。滚动（函数（）{
var scrollPos=$（window.scrollTop（）；
如果（滚动位置>=导航偏移）{
$（'cloud#u nav'）.removeClass（'absolute'）；
$（'云导航'）.addClass（'固定云导航'）；
$（“部分”）。每个（功能（i）{
如果（$（this）.position（）.top这就是你想要的吗


首先，我将计算
滚动点
更改为考虑页眉的大小：

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

然后，我们将检测滚动位置的导航高度相加，而不是减去50个像素：

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

if（$（this）.position（）.top惊人！！，谢谢你的评论，我在这上面花了太多时间，再次感谢你！