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 相关文章推荐
将form表单通过ajax实现无刷新提交的简单实例
Oct 12 Javascript
详细讲解vue2+vuex+axios
May 27 Javascript
JavaScript学习笔记之函数记忆
Sep 06 Javascript
详解Js中的模块化是如何实现的
Oct 18 Javascript
Angularjs添加排序查询功能的实例代码
Oct 24 Javascript
深入理解ES6之数据解构的用法
Jan 13 Javascript
js构建二叉树进行数值数组的去重与优化详解
Mar 26 Javascript
解决vuejs 使用value in list 循环遍历数组出现警告的问题
Sep 26 Javascript
vue通过cookie获取用户登录信息的思路详解
Oct 30 Javascript
JS/HTML5游戏常用算法之追踪算法实例详解
Dec 12 Javascript
vue 实现websocket发送消息并实时接收消息
Dec 09 Javascript
JS实现商城秒杀倒计时功能(动态设置秒杀时间)
Dec 12 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
新版PHP极大的增强功能和性能
2006/10/09 PHP
PHP显示今天、今月、上月、今年的起点/终点时间戳的代码
2011/05/25 PHP
PHP的Yii框架中Model模型的学习教程
2016/03/29 PHP
php使用redis的几种常见操作方式和用法示例
2020/02/20 PHP
JavaScript判断一个URL链接是否有效的实现方法
2011/10/08 Javascript
js计算字符串长度包含的中文是utf8格式
2013/10/15 Javascript
JS OffsetParent属性深入解析
2014/01/13 Javascript
Javascript中arguments对象详解
2014/10/22 Javascript
JavaScript仿静态分页实现方法
2015/08/04 Javascript
JavaScript学习笔记整理_用于模式匹配的String方法
2016/09/19 Javascript
第一次接触神奇的前端框架vue.js
2016/12/01 Javascript
Vue数据驱动模拟实现1
2017/01/11 Javascript
vue视频播放插件vue-video-player的具体使用方法
2019/11/08 Javascript
js实现石头剪刀布游戏
2020/10/11 Javascript
python字典多条件排序方法实例
2014/06/30 Python
python写xml文件的操作实例
2014/10/05 Python
Python中的ConfigParser模块使用详解
2015/05/04 Python
Python2.7简单连接与操作MySQL的方法
2016/04/27 Python
Python实现简易版的Web服务器(推荐)
2018/01/29 Python
在PyCharm下使用 ipython 交互式编程的方法
2019/01/17 Python
python快排算法详解
2019/03/04 Python
基于Python2、Python3中reload()的不同用法介绍
2019/08/12 Python
python定时任务 sched模块用法实例
2019/11/04 Python
Python合并2个字典成1个新字典的方法(9种)
2019/12/19 Python
如何向scrapy中的spider传递参数的几种方法
2020/11/18 Python
如何配置、使用和清除Smarty缓存
2015/12/23 面试题
法院授权委托书格式
2014/09/28 职场文书
小学新教师个人总结
2015/02/05 职场文书
元旦晚会主持词开场白
2015/05/28 职场文书
公司职员入党自传书
2015/06/26 职场文书
2019自荐信该如何写呢?
2019/07/05 职场文书
母婴行业实体、电商模式全面解析
2019/08/01 职场文书
7个你应该知道的JS原生错误类型
2021/04/29 Javascript
Redis Cluster 字段模糊匹配及删除
2021/05/27 Redis
python编程简单几行代码实现视频转换Gif示例
2021/10/05 Python
Python中的socket网络模块介绍
2022/07/23 Python