Change CSS when section is in veiwport

Question

I am having a one page website with a fixed header. I want to change header color when I scroll into another section. Here is the HTML code for header

<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 for section

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


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

Header 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;
}

Here is my Javascript for scroll

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');          
        }
    })
};

When I click about link it slides into about section.So how do I change background-color in .menu_block using jQuery or JavaScript when about section is loaded into viewport.I also need to change it into another color when I load it into team section.

Simple version of question is:

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

Possible duplicate of [How to tell if a DOM element is visible in the current viewport?](http://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport) — madalinivascu, Apr 04 '16 at 10:53

score 1 · Answer 1 · answered Apr 04 '16 at 11:13

If you use JQuery then one way to change .menu-block background-color is by if-else statements as below.you put required color-code.

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");
}

Like all

score 0 · Answer 2 · answered Apr 04 '16 at 11:17

0

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

answered Apr 04 '16 at 11:17

Amarjeet Gumber

16

then try to do by using scrolltop() method of jquery or use above tarun bhatti method.. – Amarjeet Gumber Apr 04 '16 at 11:22
i need different colors for each section and the code above is to change css attribute when clicked somewhere. – Ijas Apr 04 '16 at 11:32

Change CSS when section is in veiwport

2 Answers2