Sayfa ilerlediğinde üstbilgi arka plan rengini değiştir

Question

Bunun için bir çözüm arıyorum, ancak çalışamıyorum.

Kullanıcı, sayfayı kaydırmaya başladığında sayfa üstbilgisinin saydam bir arka plandan beyaz bir arkaplana değiştirilmesini isterim.

HTML kodu aşağıdadır:

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

CSS kodu:

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

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

Bu elemana background-color: #fff katacak kullanıcı daha kaydırılan ise En iyi 50 piksel

Bu (daha kolay korumak için) Eğer css içinde stil ekleyebilirsiniz böylece "aktif" bir sınıf ekleyecektir

düzenleme:

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

Ve css:

.active { background-color: #fff} 

Ayrıca bu css kuralı eklediğinizden emin olun, aksi halde arka plan rengi değişmeyecek