看了一些前辈的代码，找到一个还不错的代码。
我这边做了一些更改，加了一些注释。
有什么错误的地方，可以评论或留言告诉我！！
直接把代码复制进新建的html文件中就可以，记得引入jq的js文件。
html代码：
<body>
<div id="top">
<div class="top_u">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
<li>six</li>
</ul>
</div>
</div>
<div class="con">
</div>
</body>
css代码：
<style type="text/css">
* {
margin: 0;
padding: 0;
list-style: none;
}
#top {
1200px;
height: 72px;
position: fixed;
top: 0;
left: calc(50% - 600px);
margin: 0 auto;
}
.top_u {
100%;
height: 100%;
}
.top_u ul {
100%;
height: 100%;
display: flex;
justify-content: space-around;
align-items: center;
}
.top_u ul li {
180px;
height: 72px;
text-align: center;
line-height: 72px;
background-color: gainsboro;
}
.top_u ul li:hover {
background-color: orange;
}
.con {
1200px;
height: 1200px;
margin: 0 auto;
margin-top: 76px;
border: 1px solid gainsboro;
}
</style>
js代码：
<script type="text/javascript">
$(window).scroll(function() {
test();//当鼠标滑轮滑动时会调用这一个方法，
function test() {
var e = e || window.event;
if(e.wheelDelta) {
//对鼠标滑轮的判断，wheelDelta是鼠标状态，向上滑返回一个正值，向下滑返回一个负值（值可能是滑动的距离）
console.log("滑动" + e.wheelDelta);
if (e.wheelDelta > 0) {
$("#top").css({
"transition": "top 0.5s",
"top":"0",
})
} else{
$("#top").css({
"transition": "top 0.5s",
"top":"-72px",
})
}
} else if(e.detail) {
//detail与wheelDelta一个意思，只是在火狐浏览器使用，并且向上滑动返回的是负值，向下滑动返回的是正值，我这边没有火狐浏览器，也就没有测试具体效果
console.log("滑动" + e.detail);
if (e.detail < 0) {
$("#top").css({
"transition": "top 0.5s",
"top":"0",
})
} else{
$("#top").css({
"transition": "top 0.5s",
"top":"-72px",
})
}
}
};
})
</script>