페이지가 스크롤 될 때 머리글 배경색을 변경하십시오.

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 규칙을 추가해도됩니다. 배경색이 바뀌지 않을 것입니다.