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
Post a Comment