Khi người dùng kéo xuống xem nội dung, menu tự ẩn để tăng không gian cho người dùng đang hướng tới nội dung
khi người dùng kéo lên, nhiều khả năng là muốn sang trang khác thì menu hiện ra phục vụ người dùng.
HTML
<header class="an">menu</header>
CSS
header {
position:fixed;
width:100%;
top:0px;
left:0;
background:#f2f2f2;
height:80px;
z-index:99;
width:100%;
}
JS – jquery
.an {
-webkit-transition: all .6s ease;
-moz-transition: all .6s ease;
-o-transition: all .6s ease;
transition: all .6s ease;
}
$(window).scroll(function () {
var winscoll = curwinscoll-$(window).scrollTop();
curwinscoll = $(window).scrollTop();
if (curwinscoll > 350) {
if (winscoll < 0) {
var headertop = parseInt($('header').css('top'));
//alert(headertop);
//maxx = -100;
$('header').css("top","-100px");
}
else if (winscoll > 0) {
$('header').css("top","0px");
//alert(curwinscoll);
}
}Thư viện
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>