导航菜单的特效，当用户向下拉动滚动条时菜单隐藏，上拉滚动条时菜单显示出来。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery.min.js"></script>
<script>
$(function(){
var start_height = $(document).scrollTop();
var navigation_height = $('.header').outerHeight();
$(window).scroll(function() {
var end_height = $(document).scrollTop();
if (end_height > navigation_height){
$('.header').addClass('slideUp');
}else {
$('.header').removeClass('slideUp');
}
if (end_height < start_height){
$('.header').removeClass('slideUp');
}
start_height = $(document).scrollTop();
});
});
</script>
<style>
.header{position:fixed;top:0;left:0;right:0;z-index:100;height:80px;background:#0df;background:linear-gradient(90deg,#d0f,#0df);-webkit-box-shadow: 0 0 3px 1px rgba(0,0,0,.1);box-shadow:0 0 3px 1px rgba(0,0,0,.1);-webkit-transition: all .4s; transition: all .4s;}
.header.slideUp{top:-80px;}
#main{height:2000px;background: #ddd;}
#footer{background: #222;}
</style>
<title>导航菜单下拉隐藏上拉显示</title>
</head>
<body>
<div class="header">header</div>
<div id="main">Main</div>
<div id="footer">footer</div>
</body>
</html>
取消回复