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 入门·JavaScript 具有全范围的运算符
Oct 01 Javascript
js里怎么取select标签里的值并修改
Dec 10 Javascript
Javascript事件实例详解
Nov 06 Javascript
Javascript:为input设置readOnly属性(示例讲解)
Dec 25 Javascript
删除条目时弹出的确认对话框
Jun 05 Javascript
如何让你的Lightbox支持滚轮缩放及Base64图片
Dec 04 Javascript
javascript解决IE6下hover问题的方法
Jul 28 Javascript
JS使用parseInt解析数字实现求和的方法
Aug 05 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记9)
Dec 24 Javascript
Vue 让元素抖动/摆动起来的实现代码
May 31 Javascript
详解vue中router-link标签所必备了解的属性
Apr 15 Javascript
es5 类与es6中class的区别小结
Nov 09 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 获取目录下的图片并随机显示的代码
2009/12/28 PHP
一组PHP可逆加密解密算法实例代码
2014/01/21 PHP
php中函数前加&amp;符号的作用分解
2014/07/08 PHP
搭建自己的PHP MVC框架详解
2017/08/16 PHP
laravel实现分页样式替换示例代码(增加首、尾页)
2017/09/22 PHP
PHP基础之输出缓冲区基本概念、原理分析
2019/06/19 PHP
用js实现多域名不同文件的调用方法
2007/01/12 Javascript
改版了网上的一个js操作userdata
2007/04/27 Javascript
script的async属性以非阻塞的模式加载脚本
2013/01/15 Javascript
js时间日期和毫秒的相互转换
2013/02/22 Javascript
jQuery控制元素显示、隐藏、切换、滑动的方法总结
2015/04/16 Javascript
使用Javascript写的2048小游戏
2015/11/25 Javascript
jQuery无刷新上传之uploadify简单代码
2017/01/17 Javascript
jQuery ajax动态生成table功能示例
2017/06/14 jQuery
JavaScript面向对象精要(上部)
2017/09/12 Javascript
Vue组件的使用教程详解
2018/01/05 Javascript
解决angular2 获取到的数据无法实时更新的问题
2018/08/31 Javascript
Vue插值、表达式、分隔符、指令知识小结
2018/10/12 Javascript
详解Angular模板引用变量及其作用域
2018/11/23 Javascript
vuejs简单验证码功能完整示例
2019/01/08 Javascript
Vue.js中该如何自己维护路由跳转记录
2019/05/19 Javascript
vue element-ui table组件动态生成表头和数据并修改单元格格式 父子组件通信
2019/08/15 Javascript
浅析Vue下的components模板使用及应用
2019/11/27 Javascript
ES6箭头函数和扩展实例分析
2020/05/23 Javascript
js 实现碰撞检测的示例
2020/10/28 Javascript
[01:56]无止竞 再出发——中国军团出征2017年DOTA2国际邀请赛
2017/07/05 DOTA
[00:19]CN DOTA NEVER DIE!VG夺冠rOtK接受采访
2019/12/23 DOTA
Python线程创建和终止实例代码
2018/01/20 Python
python3写的简单本地文件上传服务器实例
2018/06/04 Python
美国最大的万圣节服装网站:HalloweenCostumes.com
2017/10/12 全球购物
美国家居装饰店:Pier 1
2019/09/04 全球购物
记帐员岗位责任制
2014/02/08 职场文书
2015年实习班主任工作总结
2015/04/23 职场文书
2019年销售部季度工作计划3篇
2019/10/09 职场文书
解决goland 导入项目后import里的包报红问题
2021/05/06 Golang
Python趣味爬虫之用Python实现智慧校园一键评教
2021/05/28 Python