03 Scroll Activated Slide Down Header

語法範例

<style>
#headerSlideContainer {
position: fixed;
top:-50px;
width: 100%;
background: black;
}
#headerSlideContent {
width: 900px;
height: 50px;
margin: 0 auto;
color: white;
}
</style>


<div id="headerSlideContainer">
<div id="headerSlideContent">
Header content goes here!
</div>
</div>


<script>
$(function() {
var bar = $('#headerSlideContainer');
var top = bar.css('top');
$(window).scroll(function() {
if($(this).scrollTop() > 50) {
bar.stop().animate({'top' : '0px'}, 500);
} else {
bar.stop().animate({'top' : top}, 500);
}
});
});
</script>

語法解說





參考網站



Comments