Javascript 当节位于veiwport中时更改CSS

我有一个固定标题的一页网站。当我滚动到另一个部分时，我想更改标题颜色。下面是标题的HTML代码

<div class="pull-right">
                    <nav class="navmenu center">
                        <ul>
                            <li class="first active scroll_btn"><a href="#home" >Home</a></li>
                            <li class="scroll_btn"><a href="#about" >About Us</a></li>
                            <li class="scroll_btn"><a href="#services" >Services</a></li>
                            <li class="scroll_btn"><a href="#projects" >Projects</a></li>
                            <li class="scroll_btn"><a href="#team" >Team</a></li>
                            <li class="scroll_btn"><a href="#news" >News</a></li>
                            <li class="scroll_btn last"><a href="#contacts" >Contacts</a></li>
                        </ul>
                    </nav>
                </div><!-- //MENU -->

这是我的滚动Javascript

function calculateScroll() {
    var contentTop      =   [];
    var contentBottom   =   [];
    var winTop      =   $(window).scrollTop();
    var rangeTop    =   200;
    var rangeBottom =   500;
    $('.navmenu').find('.scroll_btn a').each(function(){
        contentTop.push( $( $(this).attr('href') ).offset().top );
        contentBottom.push( $( $(this).attr('href') ).offset().top + $( $(this).attr('href') ).height() );
    })
    $.each( contentTop, function(i){
        if ( winTop > contentTop[i] - rangeTop && winTop < contentBottom[i] - rangeBottom ){
            $('.navmenu li.scroll_btn')
            .removeClass('active')
            .eq(i).addClass('active');          
        }
    })
};

函数calculateScroll（）{
var contentTop=[]；
var contentBottom=[]；
var winTop=$（window.scrollTop（）；
var rangeTop=200；
var RangeBooth=500；
$（'.navmenu'）。查找（'.scroll_btn a'）。每个（函数（）{
push（$（$（this.attr（'href'））.offset（）.top）；
contentBottom.push（$（$（this.attr（'href'））.offset（）.top+$（$（this.attr（'href'））.height（））；
})
$.each（contentTop，函数（i）{
if（winTop>contentTop[i]-rangeTop&&winTop

当我点击about链接时，它会滑入about部分。那么我如何在中更改背景色。当about部分加载到视口中时，使用jQuery或JavaScript菜单块。当我将其加载到团队部分时，我还需要将其更改为另一种颜色

问题的简单版本是：

if(viewport = <section id="#about">)
{ $(".menu_bar").css("background-color","#000");}
else if(viewport = <section id="#services">)
{ $(".menu_bar").css("background-color","#333");}

<代码>if（视口=） {$（“.menu_-bar”）.css（“背景色”，“#000”）} else if（视口=） {$（“.menu_bar”）.css（“背景色”，“#333”）}

---

如果您使用JQuery，那么更改菜单块背景颜色的一种方法是使用下面的If-else语句。您可以输入所需的颜色代码

if（$（“.navmenu li.active a”）.text（）
{
$（“.menu_block”）.css（“背景色”、“颜色代码”）；
}
else if（$（“.navmenu li.active a”）.text（）=“关于我们”）
{
$（“.menu_block”）.css（“背景色”、“颜色代码”）；
}

像所有人一样

$（文档）.ready（函数（）{
$（“.scroll_btn”）。单击（函数（）{
$（'.navmenu'）.css（'background-color'，'green'）；
});
});

在这片html和css的海洋中，我看不到一滴js可能是重复的，然后尝试使用jquery的scrolltop（）方法或使用上面的tarun bhatti方法。我需要为每个部分使用不同的颜色，上面的代码是在单击某个位置时更改css属性。

function calculateScroll() {
    var contentTop      =   [];
    var contentBottom   =   [];
    var winTop      =   $(window).scrollTop();
    var rangeTop    =   200;
    var rangeBottom =   500;
    $('.navmenu').find('.scroll_btn a').each(function(){
        contentTop.push( $( $(this).attr('href') ).offset().top );
        contentBottom.push( $( $(this).attr('href') ).offset().top + $( $(this).attr('href') ).height() );
    })
    $.each( contentTop, function(i){
        if ( winTop > contentTop[i] - rangeTop && winTop < contentBottom[i] - rangeBottom ){
            $('.navmenu li.scroll_btn')
            .removeClass('active')
            .eq(i).addClass('active');          
        }
    })
};

if(viewport = <section id="#about">)
{ $(".menu_bar").css("background-color","#000");}
else if(viewport = <section id="#services">)
{ $(".menu_bar").css("background-color","#333");}

<script>
$(document).ready(function(){
  $(".scroll_btn").click(function(){
    $('.navmenu').css('background-color', "green");
  });
});
</script>