网页中头部内容向下滑动导航栏，向上滑动时出现效果，可以用在手机移动端列表项比较多的页面当中，有利于增强用户的访问量。

当滚动条往回滚动，导航栏就会出现！

具体代码如下：

<div class="header">头部导航栏</div>

<div class="content"></div>

*{margin: 0;padding: 0;outline: none;border: none;box-sizing: border-box;}

ol,ul,li,dl{ list-style:none }

body{ -webkit-tap-highlight-color:rgba(0,0,0,0);}/*去掉默认链接底色*/

.header {

position: fixed;

width: 100%;

height: 50px;

background-color: red;

}

.content {

width: 100%;

height: 2000px;

background-color: #ccc;

float: left;

}

.hide {top: -50px;}

.show {top: 0;}

javascript:

$(function(){

var oTop1 = $(document).scrollTop();

$(window).scroll(function(){

var oTop2 = $(document).scrollTop();

if(oTop2 > oTop1){

$(".header").addClass("hide").removeClass("show");

}else {

$(".header").addClass("show").removeClass("hide");

}

oTop1 = $(document).scrollTop();

});

});