jQuery简单实现导航栏根据滑动自动悬浮效果

目前流行的网站主要是一个导航栏本来是固定的，没有自动悬浮在网站的最顶部，但是当页面下滑到导航栏的位置时，开始自动悬浮。再次向上拉到导航栏的位置时，导航栏再次固定

1、引用jq

2、css定义

body {
width:100%;
height:9000px;
padding:0;
margin:0;
border:0;
}

.nav {
width:100%；
height:50px;
line-height:50px;
background:#000;
color:#fff;
text-align:Center;
}

.box {
height:800px;
line-height:800px;
text-align:center;
}
3、html调用

< !--声明一个让导航栏不在顶部的盒子 -->

<div class="box">我也是一个div</div>

<!--声明一个导航栏 -->

<div class="nav">我是导航栏</div>

4、jquery语法

$(document).ready(function(){

//首先获取导航栏距离浏览器顶部的高度

var top = $('.nav').offset().top;

//开始监控滚动栏scroll