jquery - On scroll change opacity of header? -


im new jquery , im sure answer super basic. if can point me in right direction great. want opacity of header change 0 1 user scrolls past 400 pixels. help? www.hulu.com has perfect example.

<code> <script> $(document).ready(function() {         $(window).scroll(function() {             if ($(this).scrolltop() > 400) {                 $('.header').css("background", "#000");             } else {                 $('.header').css("background", "transparent");             }         });         }); </script> </code> 

try one:

example: http://jsfiddle.net/seh5m/

html:

<div class="header">     <div id="background"></div>     <div id="labels">         labels here     </div> </div>  <div class="content"> </div> 

css:

.header{     width:100%;     height:100px;     position:fixed;     top:0px;     z-index:3; }  body{     margin:0px; } .header #background, .header #labels {     position:absolute;     top:0px;     width:100%;     height:100%; }  .header #labels{     background-color:transperent; }  .header #background{     background-color:yellow;     display:none; }   .content{     width:100%;     height:5000px;     background-color:green; } 

jquery:

$(window).scroll(function() {     if ($(this).scrolltop() > 400) {         $( ".header #background" ).fadein();     } else {         console.log('there');         $( ".header #background" ).fadeout();     } }); 

Comments

Popular posts from this blog

java - activate/deactivate sonar maven plugin by profile? -

python - TypeError: can only concatenate tuple (not "float") to tuple -

java - What is the difference between String. and String.this. ? -