jQuery简单实现导航栏根据滑动自动悬浮效果
今天在网上看一些别人的一些网站，都觉得很厉害，写插件什么的，无意间看到一款基于插件为导航栏自动悬浮插件，当时看到之后觉得挺简单，然后便自己也开始试着写了一下。主要用处就是一个导航栏本来是固定的，没有自动悬浮在网站的最顶部，但是当页面下滑到导航栏的位置时，开始自动悬浮。再次向上拉到导航栏的位置时，导航栏再次固定。菜鸟编程，大鸟勿喷。案例开始,全部代码如下:
引入jquery文件
<script type="text/javascript" src="http://renpengpeng.com/wp-content/themes/JieStyle-Two/js/jquery.min.js">
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;
}
html 调用
<!--声明一个让导航栏不在顶部的盒子 -->
<div class="box">我也是一个div</div>
<!-- 声明一个导航栏 -->
<div class="nav">我是导航栏</div>
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':''});
}
})
})
这样一个简单的案例就完成啦！
预览地址：点我预览
html文件下载地址： jQuery简单实现导航栏根据滑动自动悬浮效果.html
