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 相关文章推荐
Javascript实例教程(19) 使用HoTMetal(5)
Dec 23 Javascript
JavaScript和JQuery实用代码片段(一)
Apr 07 Javascript
juqery 学习之五 文档处理 插入
Feb 11 Javascript
jquery如何把参数列严格转换成数组实现思路
Apr 01 Javascript
获取3个数组不重复的值的具体实现
Dec 30 Javascript
jQuery的缓存机制浅析
Jun 07 Javascript
jQuery检测滚动条是否到达底部
Dec 15 Javascript
浏览器复制插件zeroclipboard使用指南
Mar 26 Javascript
AngularJS 与Bootstrap实现表格分页实例代码
Oct 14 Javascript
jQGrid Table操作列中点击【操作】按钮弹出按钮层的实现代码
Dec 05 Javascript
VuePress 静态网站生成方法步骤
Feb 14 Javascript
vue 组件开发原理与实现方法详解
Nov 29 Javascript
使用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+mysql 实现身份验证代码
2010/03/24 PHP
PHP高级对象构建 工厂模式的使用
2012/02/05 PHP
Linux下PHP连接Oracle数据库
2014/08/20 PHP
PHP使用PDO操作数据库的乱码问题解决方法
2016/04/08 PHP
filemanage功能中用到的common.js
2007/04/08 Javascript
符合标准的js表单提交的代码
2007/09/13 Javascript
javascript css在IE和Firefox中区别分析
2009/02/18 Javascript
JS 自动完成 AutoComplete(Ajax 查询)
2009/07/07 Javascript
在新窗口打开超链接的方法小结
2013/04/14 Javascript
自定义ExtJS控件之下拉树和下拉表格附源码
2013/10/15 Javascript
jquery中EasyUI实现异步树
2015/03/01 Javascript
jQuery mobile 移动web(4)
2015/12/20 Javascript
每日十条JavaScript经验技巧(二)
2016/06/23 Javascript
浅谈vuex之mutation和action的基本使用
2017/08/29 Javascript
p5.js入门教程之键盘交互
2018/03/19 Javascript
jQuery实现参数自定义的文字跑马灯效果
2018/08/15 jQuery
PHPStorm中如何对nodejs项目进行单元测试详解
2019/02/28 NodeJs
Vue实现回到顶部和底部动画效果
2019/07/31 Javascript
Vue实现将数据库中带html标签的内容输出(原始HTML(Raw HTML))
2019/10/28 Javascript
如何基于JS截获动态代码
2019/12/25 Javascript
UEditor 自定义图片视频尺寸校验功能的实现代码
2020/10/20 Javascript
python文件读写并使用mysql批量插入示例分享(python操作mysql)
2014/02/17 Python
python实现爬虫统计学校BBS男女比例之数据处理(三)
2015/12/31 Python
对Python中range()函数和list的比较
2018/04/19 Python
巴西最大的体育用品商城:Netshoes巴西
2016/11/29 全球购物
英国最大的电子零件及配件零售商:Partmaster
2017/04/24 全球购物
基本款天堂:Everlane
2017/05/13 全球购物
长曲棍球装备:Lacrosse Monkey
2020/12/02 全球购物
优秀士兵先进事迹
2014/02/06 职场文书
函授自我鉴定范文
2014/02/06 职场文书
新春联欢会主持词
2014/03/24 职场文书
《池塘边的叫声》教学反思
2014/04/12 职场文书
建筑技术负责人岗位职责
2015/04/13 职场文书
写给女朋友的保证书
2015/05/09 职场文书
行政诉讼答辩状
2015/05/21 职场文书
opencv检测动态物体的实现
2021/07/21 Python