Цвет строки привязки позиции прокрутки 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(); 
    }