Cambia colore sfondo intestazione quando scorre la pagina

Question

Ho cercato una soluzione per questo, ma non riesco a farlo funzionare.

Vorrei che l'intestazione della pagina cambiasse da uno sfondo trasparente a uno sfondo bianco mentre l'utente inizia a scorrere la pagina.

codice HTML è:

<div class="header"> 
    <div class="topbar"></div> 
    <div class="sitelogo"></div> 
    <nav id="navigation"> 
     <ul> 
      <li id="twitter"><a href="http://www.twitter.com/iamdanmorris"><em>Twitter</em></a></li> 
      <li><a href="#contact">Contact</a></li> 
      <li><a href="#blog">Blog</a></li> 
      <li><a href="#">Portfolio</a></li> 
      <li><a href="#">About</a></li> 
      <li><a href="#">Home</a></li> 
     </ul> 
    </nav> 
    <div style="clear:both;"></div> 
</div> 

codice CSS è:

.header { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    padding: 0; 
    z-index: 10000; 
    -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25); 
    -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25); 
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25); 
    transition: all 0.2s ease-in-out; 
    height: auto; 
    background-color:transparent; 
} 

Answer 1

$(window).on("scroll", function() { 
    if($(window).scrollTop() > 50) { 
     $(".header").addClass("active"); 
    } else { 
     //remove the background property so it comes transparent again (defined in your css) 
     $(".header").removeClass("active"); 
    } 
}); 

violino: http://jsfiddle.net/634d6vgq/2/

Ciò aggiungerà il background-color: #fff all'elemento se l'utente ha scorrere più di 50 pixel dall'alto

Questo aggiungerà una classe "attiva" in modo da poter stile all'interno del CSS (più facile da mantenere)

edit:

$(function() { 
    $(window).on("scroll", function() { 
     if($(window).scrollTop() > 50) { 
      $(".header").addClass("active"); 
     } else { 
      //remove the background property so it comes transparent again (defined in your css) 
      $(".header").removeClass("active"); 
     } 
    }); 
}); 

E il tuo css:

.active { background-color: #fff} 

Assicurati di aggiungere anche questa regola CSS, altrimenti il ​​colore dello sfondo non cambierà