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面向对象编程
Nov 15 Javascript
原生js实现给指定元素的后面追加内容
Apr 10 Javascript
JavaScript中对循环语句的优化技巧深入探讨
Jun 06 Javascript
一道JS前端闭包面试题解析
Dec 25 Javascript
复杂的javascript窗口分帧解析
Feb 19 Javascript
关于原生js中bind函数的简单实现
Aug 10 Javascript
详解Bootstrap的iCheck插件checkbox和radio
Aug 24 Javascript
js原生跨域_用script标签的简单实现
Sep 24 Javascript
bootstrap日历插件datetimepicker使用方法
Dec 14 Javascript
详解node.js平台下Express的session与cookie模块包的配置
Apr 26 Javascript
微信小程序实现图片上传功能
May 28 Javascript
RxJS的入门指引和初步应用
Jun 15 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中设置多级目录session的问题
2011/08/08 PHP
PHP中创建图像并绘制文字的例子
2014/11/19 PHP
Yii2 RESTful中api的使用及开发实例详解
2016/07/06 PHP
php实现用户登陆简单实例
2017/04/04 PHP
PHP编程实现计算抽奖概率算法完整实例
2017/08/09 PHP
php命名空间设计思想、用法与缺点分析
2019/07/17 PHP
使用JavaScript 实现各种跨域的方法
2013/05/08 Javascript
HTTP 304错误的详细讲解
2013/11/13 Javascript
基于Bootstrap+jQuery.validate实现Form表单验证
2014/12/16 Javascript
输入法的回车与消息发送快捷键回车的冲突解决方法
2016/08/09 Javascript
基于IView中on-change属性的使用详解
2018/03/15 Javascript
浅谈Webpack下多环境配置的思路
2018/06/27 Javascript
vue中的自定义分页插件组件的示例
2018/08/18 Javascript
详解用场景去理解函数柯里化(入门篇)
2019/04/11 Javascript
JavaScript 禁止用户保存图片的实现代码
2020/04/28 Javascript
简单介绍Python中的round()方法
2015/05/15 Python
python如何在终端里面显示一张图片
2016/08/17 Python
python MysqlDb模块安装及其使用详解
2018/02/23 Python
Python使用matplotlib绘制三维图形示例
2018/08/25 Python
python 发送和接收ActiveMQ消息的实例
2019/01/30 Python
Python实现二叉树的常见遍历操作总结【7种方法】
2019/03/06 Python
Python 调用 Outlook 发送邮件过程解析
2019/08/08 Python
CSS3对背景图片的裁剪及尺寸和位置的设定方法
2016/03/07 HTML / CSS
Desigual德国官网:在线购买原创服装
2018/03/27 全球购物
STAUD官方网站:洛杉矶独有的闲适风格
2019/04/11 全球购物
电气工程及其自动化自我评价四篇
2013/09/24 职场文书
幼儿园教师工作制度
2014/01/22 职场文书
最新大学生创业计划书写作攻略
2014/04/02 职场文书
《故乡》教学反思
2014/04/10 职场文书
预备党员公开承诺书
2014/05/28 职场文书
2015年清明节活动总结
2015/02/09 职场文书
毕业论文答辩演讲稿
2015/06/23 职场文书
回门宴新娘答谢词
2015/09/29 职场文书
python 实现体质指数BMI计算
2021/05/26 Python
python区块链持久化和命令行接口实现简版
2022/05/25 Python
Pandas实现批量拆分与合并Excel的示例代码
2022/05/30 Python