Изменить цвет фона заголовка при прокрутке страницы

Question

Я искал решение для этого, но я не могу заставить его работать.

Я хотел бы, чтобы заголовок моей страницы менялся с прозрачного фона на белый фон, когда пользователь начинает прокручивать страницу.

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> 

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

скрипку: http://jsfiddle.net/634d6vgq/2/

Это добавит background-color: #fff к элементу, если пользователь прокрутил более 50 пикселей от вершины

Это добавит класс "активный", так что вы можете стилизовать в CSS (проще в обслуживании)

редактировать:

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

И ваш CSS:

.active { background-color: #fff} 

Убедитесь, что вы также добавили это правило css, в противном случае цвет фона не изменится.