USharing1, jQuery 实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 导航栏样式 */
.navigation{
width: 100%;
height: 50px;
background-color: #d0f079;
position: fixed;
left:0;
top: 0;
text-align: center;
transition: top 0.5s;
}
/* 隐藏效果 */
.hide{
top: -60px;
}
/* 内容栏样式 */
.content{
width: 80%;
height: 5000px;
margin: 60px auto;
background-color: #41bcff;
text-align: center;
}
</style>
</head>
<body>
<div class="navigation">导航菜单栏</div>
<div class="content">内容</div>
//此处jquery路径要替换
<script
src="https://code.jquery.com/jquery-2.2.4.js"
integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI="
crossorigin="anonymous">
</script>
<script>
$(function(){
//页面初始化的时候，获取滚动条的高度（上次高度）
var start_height = $(document).scrollTop();
//获取导航栏的高度(包含 padding 和 border)
var navigation_height = $('.navigation').outerHeight();
$(window).scroll(function() {
//触发滚动事件后，滚动条的高度（本次高度）
var end_height = $(document).scrollTop();
//触发后的高度 与 元素的高度对比
if (end_height > navigation_height){
$('.navigation').addClass('hide');
}else {
$('.navigation').removeClass('hide');
}
//触发后的高度 与 上次触发后的高度
if (end_height < start_height){
$('.navigation').removeClass('hide');
}
//再次获取滚动条的高度，用于下次触发事件后的对比
start_height = $(document).scrollTop();
});
});
</script>
</body>
</html>
