jQuery实现智能判断固定导航条或侧边栏的方法


Posted in Javascript onSeptember 04, 2016

本文实例讲述了jQuery实现智能判断固定导航条或侧边栏的方法。分享给大家供大家参考,具体如下:

这是一个jQuery智能判断固定DIV层的特效代码,通过这个jQuery智能代码,你可以设置导航栏、侧边栏、任何DIV层的固定显示;现在蓝叶的站就用的这个jQuery智能判断固定的导航条,要看演示的就请下拉页面滚动条,就会看到导航条固定了;使用这个代码需要在页面里引用jQuery库的JS文件,现在的网站一般都引用了jQuery库代码,如果没有那就打开你网站的模板,在页头或者页位加上<script src="http://libs.baidu.com/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>代码保存,这就成功引用的JQ库代码;具体JQ智能判断固定导航条或侧边栏代码如何使用请见下面的说明:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
.topfixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9000;
  webkit-box-shadow: 0px 4px 4px #baacc9;
  -moz-box-shadow: 0px 4px 4px #baacc9;
  box-shadow: 0px 4px 4px #baacc9;
  background: #fff;
}
</style>
</head>
<body>
<div id="nav" style=" width:100%; height:20px; background-color:#f60; margin:0 auto;"></div>
<div style="height:10000px;"></div>
<script src="http://libs.baidu.com/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script>
$(window).scroll(function(){
if($(this).scrollTop()>220){
$('#nav').addClass('topfixed');}
else {
$('#nav').removeClass('topfixed');
}});
</script>
<!--说明:当下拉滚动条距离头部220px的时候,就会给#nav这个样式的DIV层添加一个CSS样式topfixed使其固定显示。
上面代码里的220就是下拉滚动条距离头部的距离,如何设置请自己修改,#nav是你需要固定的DIV层CSS样式名。的DIV层CSS样式名。-->
</body>
</html>

效果图:

jQuery实现智能判断固定导航条或侧边栏的方法

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
escape、encodeURI、encodeURIComponent等方法的区别比较
Dec 27 Javascript
jQuery 1.9移除了$.browser可以使用$.support来替代
Sep 03 Javascript
jquery图片倾斜层叠切换特效代码分享
Aug 27 Javascript
使用jQuery调用XML实现无刷新即时聊天
Aug 07 Javascript
jQuery Validate插件实现表单验证
Aug 19 Javascript
JS作用域闭包、预解释和this关键字综合实例解析
Dec 16 Javascript
关于js中的鼠标事件总结
Jul 11 Javascript
jQuery实现html双向绑定功能示例
Oct 09 jQuery
vue resource post请求时遇到的坑
Oct 19 Javascript
如何用RxJS实现Redux Form
Dec 29 Javascript
浅谈javascript错误处理
Aug 11 Javascript
解决angular 使用原生拖拽页面卡顿及表单控件输入延迟问题
Apr 21 Javascript
angularjs实现文字上下无缝滚动特效代码
Sep 04 #Javascript
jQuery实现为LI列表前3行设置样式的方法【2种方法】
Sep 04 #Javascript
JS实现屏蔽网页右键复制及ctrl+c复制的方法【2种方法】
Sep 04 #Javascript
jQuery实现的自动加载页面功能示例
Sep 04 #Javascript
jQuery简单实现中间浮窗效果
Sep 04 #Javascript
JavaScript算法系列之快速排序(Quicksort)算法实例详解
Sep 04 #Javascript
jQuery中ScrollTo用法示例
Sep 04 #Javascript
You might like
《星际争霸II》全新指挥官斯台特曼现已上线
2020/03/08 星际争霸
第一个JavaScript入门基础 document.write输出
2010/02/22 Javascript
6款经典实用的jQuery小插件及源码(对话框/提示工具等等)
2013/02/04 Javascript
JS Map 和 List 的简单实现代码
2013/07/08 Javascript
js如何获取object类型里的键值
2014/02/18 Javascript
在JavaScript的正则表达式中使用exec()方法
2015/06/16 Javascript
jQuery实现的导航动画效果(附demo源码)
2016/04/01 Javascript
jQuery实现立体式数字滚动条增加效果
2016/12/21 Javascript
vue移动端路由切换实例分析
2018/05/14 Javascript
mpvue 单文件页面配置详解
2018/12/02 Javascript
js中Function引用类型常见有用的方法和属性详解
2019/12/11 Javascript
vuex中store存储store.commit和store.dispatch的用法
2020/07/24 Javascript
前端vue如何使用高德地图
2020/11/05 Javascript
[40:27]完美世界DOTA2联赛PWL S3 PXG vs GXR 第一场 12.19
2020/12/24 DOTA
Python采用Django制作简易的知乎日报API
2016/08/03 Python
Python实现读取并保存文件的类
2017/05/11 Python
使用python实现ANN
2017/12/20 Python
对pandas读取中文unicode的csv和添加行标题的方法详解
2018/12/12 Python
Python设计模式之享元模式原理与用法实例分析
2019/01/11 Python
Python3.5集合及其常见运算实例详解
2019/05/01 Python
Python爬虫程序架构和运行流程原理解析
2020/03/09 Python
python实现opencv+scoket网络实时图传
2020/03/20 Python
Python打印特殊符号及对应编码解析
2020/05/07 Python
对Matlab中共轭、转置和共轭装置的区别说明
2020/05/11 Python
什么是Python中的顺序表
2020/06/02 Python
详解pandas映射与数据转换
2021/01/22 Python
html5录音功能实战示例
2019/03/25 HTML / CSS
欧洲高端品牌直销店:Fashionesta
2016/08/31 全球购物
美国大型的健身社区和补充商店:Bodybuilding.com
2016/09/06 全球购物
优衣库英国官网:UNIQLO英国
2016/12/25 全球购物
捐款倡议书怎么写
2014/05/13 职场文书
文明班级建设方案
2014/05/15 职场文书
2015年党员个人自我评价
2015/03/03 职场文书
go语言中切片与内存复制 memcpy 的实现操作
2021/04/27 Golang
用Python爬虫破解滑动验证码的案例解析
2021/05/06 Python
PYTHON使用Matplotlib去实现各种条形图的绘制
2022/03/22 Python