本示例使用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. C语言初学 转义字符举例

    #include<stdio.h> main() { printf("\101 \x42 C\n"); printf("I say:\"How ar ...

  2. Regular expression cheat sheet

    \s white-space characters \S Non-white-space characters \d digital numbers \D non-digital numbers \w ...

  3. Linux_access the file or directory which start with "-"

    cd -- filename/dirName [ccmobil@vm-a65a-fc19 wstemp]$ cd -/ -bash: cd: -: invalid option cd: usage: ...

  4. hadoop集群的故障概率估算

    hadoop集群的机器数业界(国内)最大的在5000左右,是什么限制了集群的规模呢?有好几个原因. 1. namenode的内存大小限制 2. 机器故障概率随着机器数目增大而增大,通常一份数据存储在h ...

  5. Altium Designer (protel) 各版本“故障”随谈

    Altium 的版本很多,每个版本都或多或少有些可容忍或可不容忍的问题,此贴只是希望各位能将遇到的问题写出来,只是希望 给还在使用 altium 的网友一些参考,也希望有些能被 altium 所接受@ ...

  6. C51的模块化设计方法

    一个大的单片机程序往往包含很多模块,我是这样组织的: 1.每一个C源文件都要建立一个与之名字一样的H文件(头文件),里面仅仅包括该C文件的函数的声明,其他的什么也不会有,比如变量的定义啊等等不应该有. ...

  7. dp优化简单总结

    1.二分优化 (使用二分查找优化查找效率) 典型例题:LIS dp[i]保存长度为 i 的上升子序列中最小的结尾,可以用二分查找优化到nlogn 2.数学优化 (通过数学结论减少状态数) 例题1:hd ...

  8. c语言指针点滴1

    #include <stdio.h> #include <stdlib.h> void main() { int *p = NULL;//指针开始最好都初始化为空 if(p = ...

  9. JAVA并发实现四（守护线程和线程阻塞）

    守护线程     Java中有两类线程:User Thread(用户线程).Daemon Thread(守护线程) 用户线程即运行在前台的线程,而守护线程是运行在后台的线程. 守护线程作用是为其他前台 ...

  10. mysql 存储过程 计算报表

    把用例执行情况mysql表汇总起来 proc_write_report 汇总执行用例表中的测试数据 写入report 表,report表包括字段 report_id(自增)execution_flag ...