jquery滚动位置变化锚链接的颜色，如果达到它的页面部分，一页网站

Question

你可以看到，我有每个if语句的具体数字。我希望它专门更改访问/当前/活动锚链接的文本颜色。页面的高度将取决于它的宽度，所以这有什么解决方案？ 对不起，如果你困惑我在说什么。我无法沟通的英语完美XD

Codepen

var bottomPage = $(window).scrollTop() + $(window).height() == $(document).height(); 
var scrollPos = $(window).scrollTop(); 

if(scrollPos >= 300 && scrollPos <= 854){ 
    $('header nav ul li a').removeClass(); 
    $('header nav ul li a[href="#about-nav"]').addClass('current'); 
}else if (scrollPos >= 855 && !bottomPage){ 
    $('header nav ul li a').removeClass(); 
    $('header nav ul li a[href="#portfolio-scroll"]').addClass('current'); 
}else if (bottomPage){ 
    $('header nav ul li a').removeClass(); 
    $('header nav ul li a[href="#contact-scroll"]').addClass('current'); 
}else { 
    $('header nav ul li a').removeClass(); 
} 

Answer 1

我解决它！

这是我的新代码。我认为，它完美的作品。

var bottomPage = $(window).scrollTop() + $(window).height() == $(document).height(); 
    var about = $('div#about-nav').position(); 
    var aboutPos = about.top; 
    var portfolio = $('div#portfolio-scroll').position(); 
    var portfolioPos = portfolio.top; 

    if(scrollPos >= aboutPos && scrollPos < (portfolioPos - 1)){ 
    $('header nav ul li a').removeClass(); 
    $('header nav ul li a[href="#about-nav"]').addClass('current'); 
    }else if (scrollPos >= (portfolioPos - 1) && !bottomPage){ 
    $('header nav ul li a').removeClass(); 
    $('header nav ul li a[href="#portfolio-scroll"]').addClass('current'); 
    }else if (bottomPage){ 
    $('header nav ul li a').removeClass(); 
    $('header nav ul li a[href="#contact-scroll"]').addClass('current'); 
    }else { 
    $('header nav ul li a').removeClass(); 
    }