本示例使用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>

这个效果还有新版本的实现:http://www.keleyi.com/a/bjac/5d7f4ac2efa72d30.htm

本文转自柯乐义：http://www.keleyi.com/a/bjac/ed5eb8c2959c619e.htm

滚动页面时DIV到达顶部时固定在顶部的更多相关文章

  1. 让div固定在顶部不随滚动条滚动

    让div固定在顶部不随滚动条滚动 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...

  2. 元素滚动到底部或顶部时阻止body滚动

    移动端的弹窗内容有滚动条,滚动到底部或顶部时或影响弹窗下的body滚动,某些浏览器滚动到顶部时不松手就触发了刷新页面的情况,如果不需要这样的默认体验,就需要加一下判断了. var startX,sta ...

  3. 让div固定在顶部不随滚动条滚动【转】

    让div固定在顶部不随滚动条滚动 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...

  4. vue中滚动页面，改变样式&&导航栏滚动时，样式透明度修改

    vue中滚动页面,改变样式&&导航栏滚动时,样式透明度修改.vue <div class="commonHeader" v-bind:class=" ...

  5. jquery页面滚动，菜单固定到顶部

    // 菜单固定 $(function(){ //获取要定位元素距离浏览器顶部的距离 var navH = $("#topp").offset().top; //滚动条事件 $(wi ...

  6. 页面加载时，页面中DIV随之滑动出来；去掉页面滚动条

    <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo ...

  7. JS 实现DIV 滚动至顶部后固定

    JS 实现DIV 滚动至顶部后固定 <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8" ...

  8. 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结

    史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...

  9. Tp验证码:$Verify = new \Think\Verify(); $Verify->entry(n);【参数n,页面有多个验证码时用】

    一.验证码参数:(中文字符集和英文字符集在父类里面都可以取到,可修改) //1.生成验证码 $Verify = new \Think\Verify(); $Verify->entry(n);[参 ...

随机推荐

  1. Activiti工作流学习-----基于5.19.0版本(1)

    该版本的Activiti运行须知: 1.JDK 6+,Eclipse最好是Kepler以上版本. 2.试验功能都有EXPERIMENTAL标注,被标注的部分不应该视为稳定的. 有兴趣的同学可以去了解下 ...

  2. JavaWeb学习笔记--filter开发

    介绍自定义的Filter类必须实现Filter接口,并且实现Filter接口定义的init() doFilter() destory()方法.其中init为初始化,destory为销毁 doFilte ...

  3. bzoj 2075: [POI2004]KAG

    整天鬼畜题搞搞,感觉药丸…… 这种题出到xjoi模拟题里,太神了…… 这题的核心在于分割Cograph,尝试把Cograph的合成过程给求出来. 我们将这张图中的边为黑边,在这张图的补图中出现的边为白 ...

  4. cf D. Dima and Hares

    http://codeforces.com/contest/358/problem/D 题意:ai代表相邻的两个野兔都没有吃食物情况下的快乐系数,bi代表的是在相邻的两个野兔中有一个吃到食物的快乐系数 ...

  5. hdu 相遇周期

    #include <cstdio> #include <cstring> #include <algorithm> using namespace std; int ...

  6. POJ 1755 Triathlon

    http://poj.org/problem?id=1755 题意:铁人三项,每个人有自己在每一段的速度,求有没有一种3条路线长度都不为0的设计使得某个人能严格获胜? 我们枚举每个人获胜,得到不等式组 ...

  7. bzoj1676[Usaco2005 Feb]Feed Accounting 饲料计算

    Description Farmer John is trying to figure out when his last shipment of feed arrived. Starting wit ...

  8. 淡淡de馨香---职业尊严

    大学四年时光匆匆而过,仿佛一切都不曾远去,那种熟悉又激动的感觉好似就在昨天,但是.一切都仅仅是一种感觉,在现实面前没有谁能够逆天,在被遗忘的什么时候,曾经是想着无数的梦想与自定义,同样也是在被遗忘的什 ...

  9. hdu2082：简单母函数

    题目大意: a,b,c,d...z这些字母的价值是1,2,3......26 给定 这26个字母分别的数量,求总价值不超过50的单词的数量 分析: 标准做法是构造母函数 把某个单词看作是,关于x的多项 ...

  10. UIApplication的作用

    1.设置app图标右上角的数字2.设置状态栏的属性(样式.是否要显示)3.打开某个链接\发短信\打电话4.keyWindow : 访问程序的主窗口(一个程序只能有一个主窗口)5.windows : 访 ...