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

$(document).scroll(function(){

//获取当前滚动栏scroll的高度并赋值

var scrTop = $(window).scrollTop();

//开始判断如果导航栏距离顶部的高度等于当前滚动栏的高度则开启悬浮

if(scrTop >= top){ $('.nav').css({'position':'fixed','top':'0','width':'100%'}); }else{

//否则清空悬浮

$('.nav').css({'position':'','top':''});

}

})

})