div当滚动到页面顶部的时候固定在顶部实例代码


Posted in Javascript onMay 27, 2013

本示例使用Javascript实现了滚动页面时,DIV到达顶部时固定在顶部。在IE下效果有点闪,效果网址:http://www.keleyi.com/keleyi/phtml/fixdiv.htm

下面是代码:

<body style="margin:0px;"> 
<div style="height:300px;background:#e0e0e0"></div> 
<div id="fixedMenu_keleyi_com" style="background:#ffffff;width:100%;"><ul><li><a href="http://www.keleyi.com/menu/net/" target="_blank">.NET</a></li> 
<li><a href="http://www.keleyi.com/menu/javascript/" target="_blank">Javascript</a></li> 
<li><a href="http://www.keleyi.com/menu/jquery/" target="_blank">jQuery</a></li> 
<li><a href="http://www.keleyi.com/menu/csharp/" target="_blank">C#</a></li> 
<li><a href="http://www.keleyi.com/menu/other/" target="_blank">其他</a></li> 
<li><a href="http://www.keleyi.com/" target="_blank">首页</a></li></ul> 
</div> 
<div style="height:2600px;background:#999"></div> 
<script type="text/javascript" src="http://www.keleyi.com/keleyi/pmedia/jquery-1.9.1.min.js"></script> 
<script type="text/javascript"> 
$(function () { 
var ie6 = document.all; 
var dv = $('#fixedMenu_keleyi_com'), st; 
dv.attr('otop', dv.offset().top); //存储原来的距离顶部的距离 
$(window).scroll(function () { 
st = Math.max(document.body.scrollTop || document.documentElement.scrollTop); 
if (st > parseInt(dv.attr('otop'))) { 
if (ie6) {//IE6不支持fixed属性,所以只能靠设置position为absolute和top实现此效果 
dv.css({ position: 'absolute', top: st }); 
} 
else if (dv.css('position') != 'fixed') dv.css({ 'position': 'fixed', top: 0 }); 
} else if (dv.css('position') != 'static') dv.css({ 'position': 'static' }); 
}); 
}); 
</script> 
</body>
Javascript 相关文章推荐
js精度溢出解决方案
Dec 02 Javascript
使用jQuery解决IE与FireFox下createElement方法的差异
Nov 14 Javascript
JS中获取函数调用链所有参数的方法
May 07 Javascript
AngularJS基础知识笔记之过滤器
May 10 Javascript
JavaScript采用递归算法计算阶乘实例
Aug 04 Javascript
js实现商品抛物线加入购物车特效
Nov 18 Javascript
jQuery无缝轮播图代码
Dec 22 Javascript
webuploader实现上传图片到服务器功能
Aug 16 Javascript
vue实现循环切换动画
Oct 17 Javascript
Vue中的验证登录状态的实现方法
Mar 09 Javascript
javascript 函数的暂停和恢复实例详解
Apr 25 Javascript
vue-router路由懒加载及实现的3种方式
Feb 28 Vue.js
使用jquery实现div的tab切换实例代码
May 27 #Javascript
一个简单的瀑布流效果(主体形式自写)
May 27 #Javascript
jquery实现的一个导航滚动效果具体代码
May 27 #Javascript
JS/FLASH实现复制代码到剪贴板(兼容所有浏览器)
May 27 #Javascript
jQuery数据缓存功能的实现思路及简单模拟
May 27 #Javascript
jQuery函数的等价原生函数代码示例
May 27 #Javascript
JS HTML5 音乐天气播放器(Ajax获取天气信息)
May 26 #Javascript
You might like
PHP开发中四种查询返回结果分析
2011/01/02 PHP
Apache实现Web Server负载均衡详解(不考虑Session版)
2013/07/05 PHP
CodeIgniter配置之SESSION用法实例分析
2016/01/19 PHP
SAE实时日志接口SDK用法示例
2016/10/09 PHP
PDO::setAttribute讲解
2019/01/29 PHP
PHP保留两位小数的几种方法
2019/07/24 PHP
JS打开新窗口的2种方式
2013/04/18 Javascript
如何屏蔽防止别的网站嵌入框架代码
2015/08/24 Javascript
jQuery实现别踩白块儿网页版小游戏
2017/01/18 Javascript
jQuery响应滚动条事件功能示例
2017/10/14 jQuery
通过函数作用域和块级作用域看javascript的作用域链
2018/08/05 Javascript
微信小程序拍照和摄像功能实现方法示例
2019/02/01 Javascript
vue实现购物车的监听
2020/04/20 Javascript
在vue中使用防抖函数组件操作
2020/07/26 Javascript
跟老齐学Python之Python安装
2014/09/12 Python
安装Python的web.py框架并从hello world开始编程
2015/04/25 Python
Python的ORM框架中SQLAlchemy库的查询操作的教程
2015/04/25 Python
Python 专题四 文件基础知识
2017/03/20 Python
python使用PyCharm进行远程开发和调试
2017/11/02 Python
使用python 和 lint 删除项目无用资源的方法
2017/12/20 Python
python中(str,list,tuple)基础知识汇总
2018/02/20 Python
django利用request id便于定位及给日志加上request_id
2018/08/26 Python
python使用if语句实现一个猜拳游戏详解
2019/08/27 Python
JYSK加拿大:购买家具、床垫、家居装饰等
2020/02/14 全球购物
巴西24小时在线药房:Droga Raia
2020/05/12 全球购物
Prototype如何实现页面局部定时刷新
2013/08/06 面试题
Structs界面控制层技术
2013/10/11 面试题
自动化工程专业个人应聘自荐信
2013/09/26 职场文书
广告传媒专业应届生求职信
2014/03/01 职场文书
职工擅自离岗检讨书
2014/09/23 职场文书
2014年领导班子专项整治整改方案
2014/09/28 职场文书
2014年全国法制宣传日宣传活动方案
2014/11/02 职场文书
2014年教研员工作总结
2014/12/23 职场文书
2015年团支部工作总结
2015/04/03 职场文书
MongoDB数据库部署环境准备及使用介绍
2022/03/21 MongoDB
MySQL中正则表达式(REGEXP)使用详解
2022/07/07 MySQL