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 文件本身编码转换 图文教程
Oct 12 Javascript
JS+DIV实现鼠标划过切换层效果的实例代码
Nov 26 Javascript
angular中使用路由和$location切换视图
Jan 23 Javascript
JavaScript实现页面跳转的几种常用方式
Nov 28 Javascript
AngularJS 最常用的功能汇总
Feb 17 Javascript
详谈javascript异步编程
Feb 21 Javascript
防止重复发送 Ajax 请求
Feb 15 Javascript
详解前端路由实现与react-router使用姿势
Aug 07 Javascript
hammer.js实现图片手势放大效果
Aug 29 Javascript
vue-cli webpack2项目打包优化分享
Feb 07 Javascript
判断JavaScript中的两个变量是否相等的操作符
Dec 21 Javascript
详解ES6 中的Object.assign()的用法实例代码
Jan 11 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获取用户IPv4或IPv6地址的代码
2012/11/15 PHP
PHP_Cooikes不同页面无法传递的解决方法
2014/03/07 PHP
详谈配置phpstorm完美支持Codeigniter(CI)代码自动完成(代码提示)
2017/04/07 PHP
PHP使用PhpSpreadsheet操作Excel实例详解
2020/03/26 PHP
javascript String 对象
2008/04/25 Javascript
利用Javascript判断操作系统的类型实现不同操作系统下的兼容性
2013/01/29 Javascript
JavaScript中标识符提升问题
2015/06/11 Javascript
基于jquery实现可定制的web在线富文本编辑器附源码下载
2015/11/17 Javascript
Javascript函数中的arguments.callee用法实例分析
2016/09/16 Javascript
JS获取鼠标坐标并且根据鼠标位置不同弹出不同内容
2017/06/12 Javascript
js 判断一个数字是不是2的n次方幂的实例
2017/11/26 Javascript
JavaScript学习总结(一) ECMAScript、BOM、DOM(核心、浏览器对象模型与文档对象模型)
2018/01/07 Javascript
js中int和string数据类型互相转化实例
2019/01/16 Javascript
微信小程序收货地址API兼容低版本解决方法
2019/05/18 Javascript
判断js数据类型的函数实例详解
2019/05/23 Javascript
js实现纯前端压缩图片
2020/11/16 Javascript
[48:41]VP vs VG Supermajor小组赛 B组胜者组决赛 BO3 第二场 6.2
2018/06/03 DOTA
[40:19]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第二场 12.18
2020/12/19 DOTA
python多进程操作实例
2014/11/21 Python
python访问类中docstring注释的实现方法
2015/05/04 Python
Python中的fileinput模块的简单实用示例
2015/07/09 Python
python对list中的每个元素进行某种操作的方法
2018/06/29 Python
用python统计代码行的示例(包括空行和注释)
2018/07/24 Python
对Pandas MultiIndex(多重索引)详解
2018/11/16 Python
python实现flappy bird小游戏
2018/12/24 Python
Python 列表去重去除空字符的例子
2019/07/20 Python
解决Djang2.0.1中的reverse导入失败的问题
2019/08/16 Python
Python实现UDP程序通信过程图解
2020/05/15 Python
Tensorflow tf.tile()的用法实例分析
2020/05/22 Python
东芝官网商城:还原日式美学,打造美好生活
2018/12/27 全球购物
Android面试宝典
2013/08/06 面试题
清扬洗发水广告词
2014/03/14 职场文书
2014乡镇班子个人对照检查材料思想汇报
2014/09/26 职场文书
Android开发之WECHAT微信小程序路由跳转的两种形式
2022/04/12 Java/Android
详解Flutter网络请求Dio库的使用及封装
2022/04/14 Java/Android
Javascript webpack动态import
2022/04/19 Javascript