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

    使用set和setenv命令可以设置shell选项或者列出shell变量 在C Shell 里, set 定义局部变量, setenv定义全局变量   1.set   set 变量名 ＝ 内容: s2 ...

  2. iOS触摸事件深度解析－备用

    概述 本文主要解析从我们的手指触摸苹果设备到最终响应事件的整个处理机制.本质上讲,整个过程可以分为两个步骤: 步骤1:找目标.在iOS视图层次结构中找到触摸事件的最终接受者: 步骤2:事件响应.基于i ...

  3. 酷冷至尊·毁灭者II代机箱 安装指南

    酷冷至尊·毁灭者II代机箱 安装向导

  4. JavaScript中的Array对象

    1.创建Array对象创建Array对象的语法var 数组名 = new Array();定义数组之后,就需要向数组中添加元素,格式如下数组名[<下标>]=值: 2.Array对象属性Ar ...

  5. js全局函数

    http://www.w3cschool.cc/jsref/jsref-obj-global.html 以前没搞懂JS的全局函数,全局函数和window对象的函数不一样.全局函数不属于任何一个内置对象 ...

  6. poj 2456 Aggressive cows(二分搜索之最大化最小值)

    Description Farmer John has built a <= N <= ,) stalls. The stalls are located along a straight ...

  7. python linecache标准库基础学习

    #python标准库基础之:linecacge:高效读取文本文件#说明与作用"""可以从文件或者导入python模块获取文件,维护一个结果缓存,从而可以更高效地从相同文件 ...

  8. 在ubuntu14.04上部署hadoop2.6.3

    一.在Ubuntu下创建hadoop组和hadoop用户 增加hadoop用户组,同时在该组里增加hadoop用户,后续在涉及到hadoop操作时,我们使用该用户. 1.创建hadoop用户组 2.创 ...

  9. [Javascript] lodash: memoize() to improve the profermence

    Link: https://lodash.com/docs#memoize Example: .service('UserPresenter', function(UserConstants){ va ...

  10. 线程 （detach的作用）

      线程状态在一个线程的生存期内,可以在多种状态之间转换.不同操作系统可以实现不同的线程模型,定义许多不同的线程状态,每个状 态还可以包含多个子状态.但大体说来,如下几种状态是通用的:       就 ...