一.需求说明
页面加载时导航栏悬浮在页面的上方,当滚动条向下滚动时导航栏隐藏,当滚动条向上滚动时导航栏显示。
二.原理讲解
页面打开时,先获取到页面的滚动条的初始高度(也可直接设为0),作用是初始化一个值,用于后面事件触发后进行判断。
再获取导航栏的高度,作用是在初始位置进行下拉页面后,在什么时候触发导航栏隐藏。
最后写滚动条触发函数
三.事件函数讲解
事件触发后,首先判断事件发生后滚动条的高度与导航栏的高度。
当判断为True时,导航条隐藏;当判断为False时,导航条出现。
然后判断本次事件导航条的高度与上次事件导航条的高度。
当上次高度,低于本次高度,说明用户在看下面的内容,导航栏隐藏
当上次高度,高于本次高度,说明用户在看上面的内容,导航栏出现
四.源码
<!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="js/jquery-2.0.3.js"></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>