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 相关文章推荐
JQuery Tips相关(1)----关于$.Ready()
Aug 14 Javascript
jquery+CSS3模拟Path2.0动画菜单效果代码
Aug 31 Javascript
jQuery实现灰蓝风格标准二级下拉菜单效果代码
Aug 31 Javascript
Angularjs中$http以post请求通过消息体传递参数的实现方法
Aug 05 Javascript
jquery延迟对象解析
Oct 26 Javascript
Bootstrap Img 图片样式(推荐)
Dec 13 Javascript
详解微信小程序 相对定位和绝对定位
May 11 Javascript
js自定义弹框插件的封装
Aug 24 Javascript
Angular项目中$scope.$apply()方法的使用详解
Jul 26 Javascript
react以create-react-app为基础创建项目
Mar 14 Javascript
vue-baidu-map 进入页面自动定位的解决方案(推荐)
Apr 28 Javascript
JavaScript实现指定数量的并发限制的示例代码
Mar 10 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
全国FM电台频率大全 - 15 山东省
2020/03/11 无线电
Linux下 php5 MySQL5 Apache2 phpMyAdmin ZendOptimizer安装与配置[图文]
2008/11/18 PHP
PHP内核介绍及扩展开发指南―基础知识
2011/09/11 PHP
PHP函数学习之PHP函数点评
2012/07/05 PHP
php实现给图片加灰色半透明效果的方法
2014/10/20 PHP
php可生成缩略图的文件上传类实例
2014/12/17 PHP
jQuery学习5 jQuery事件模型
2010/02/07 Javascript
js 判断脚本加载完毕的代码
2011/07/13 Javascript
SyntaxHighlighter语法高亮插件使用说明
2011/08/14 Javascript
JS自定义功能函数实现动态添加网址参数修改网址参数值
2013/08/02 Javascript
简介EasyUI datagrid editor combogrid搜索框的实现
2016/04/01 Javascript
使用PHP+JavaScript将HTML页面转换为图片的实例分享
2016/04/18 Javascript
微信开发 使用picker封装省市区三级联动模板
2016/10/28 Javascript
JavaScript中的 attribute 和 jQuery中的 attr 方法浅析
2017/01/04 Javascript
input框中自动展示当前日期yyyy/mm/dd的实现方法
2017/07/06 Javascript
微信小程序第三方框架对比 之 wepy / mpvue / taro
2019/04/10 Javascript
浅谈TypeScript的类型保护机制
2020/02/23 Javascript
详解 javascript对象创建模式
2020/10/30 Javascript
[04:54]DOTA2 2017国际邀请赛:上届冠军WINGS采访短片
2017/08/09 DOTA
Python functools模块学习总结
2015/05/09 Python
Python探索之修改Python搜索路径
2017/10/25 Python
Python实现的括号匹配判断功能示例
2018/08/25 Python
自定义django admin model表单提交的例子
2019/08/23 Python
Python笔记之代理模式
2019/11/20 Python
解决pycharm同一目录下无法import其他文件
2020/02/12 Python
使用python创建生成动态链接库dll的方法
2020/05/09 Python
PyTorch: Softmax多分类实战操作
2020/07/07 Python
python3代码中实现加法重载的实例
2020/12/03 Python
html5 学习简单的拾色器
2010/09/03 HTML / CSS
尤为Wconcept中国官网:韩国设计师品牌服饰
2019/01/10 全球购物
我的动漫时代的创业计划书范文
2014/01/27 职场文书
个人担保书格式范文
2014/05/12 职场文书
城市创卫标语
2014/06/17 职场文书
上党课的心得体会
2014/09/02 职场文书
2015年全民创业工作总结
2015/07/23 职场文书
详细介绍MySQL中limit和offset的用法
2022/05/06 MySQL