Question

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

的 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 -->

对于

部分，

AND HTML

<section id="home">
Blah blah blah
</section>


<section id="about">
Blah blah blah
</section>

标题CSS

.menu_block {
    position:fixed;
    z-index:9999;
    left:0;
    top:0;
    right:0;
    height:80px;
    width:100%;
    background-color:#161616;
    box-shadow:0 2px 3px rgba(0,0,0,0.1);
}

.navmenu ul li {
    position:relative;
    display:inline-block;
}
.navmenu ul li a {
    display: block;
    margin: 0 0 0 -3px;
    padding: 30px 20px;
    text-transform: uppercase;
    font: 500 14px/20px open sans;
    color: #fff;
    background-color:transparent;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
}
.navmenu li:hover a,
.navmenu li.active a {
    color: #FFD902;
}

以下是我的 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');          
        }
    })
};

当我点击关于链接时，它会滑入about section。那么如何使用更改 .menu_block 中的 background-color jQuery或JavaScript 当关于section加载到viewport时。当我将其加载到 team 部分时，我还需要将其更改为另一种颜色。

问题的简单版本是：

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

Answer 1

如果你使用JQuery，那么改变.menu-block background-color的一种方法是使用if-else语句，如下所示。你输入所需的颜色代码。

if($(".navmenu li.active a").text() == "Home")
{
    $(".menu_block").css("background-color","color-code");
}
else if($(".navmenu li.active a").text() == "About Us")
{
    $(".menu_block").css("background-color","color-code");
}

像所有

Answer 2

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

当section在veiwport中时更改CSS

2 个答案: