CSS ändern, wenn der Abschnitt in VEIWPORT ist

Question

Ich habe eine eine Seite Website mit einem festen Header. Ich möchte die Kopfzeilenfarbe ändern, wenn ich in einen anderen Abschnitt blättern möchte. Hier ist die HTML Code für Kopf

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

UND HTML für Abschnitt

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


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

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

Hier ist mein Javascript für 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');   
     } 
    }) 
}; 

Wenn klicken I über Link es in etwa section.So gleitet, wie ändere ich background-color in .menu_block mit jQuery oder JavaScript, wenn es um Abschnitt in geladen wird viewport.Ich muss es auch in eine andere Farbe ändern, wenn ich es in Team Abschnitt laden.

Einfache Version Frage:

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

Wenn Sie JQuery dann einem Weg, verwenden wird .menu-Block Hintergrund-Farbe zu ändern, indem if-else-Anweisungen als erforderlichen Farbcode below.you setzen .

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

Wie alle

Answer 2

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