本示例使用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. Linux中的段管理，bss段，data段，

    Linux 的段管理, BSS段(bss segment)通常是指用来存放程序中未初始化的全局变量的一块内存区域.BSS是英文Block Started by Symbol的简称.BSS段属于静态内存 ...

  2. Objective-C 静态变量 使用方法

    详解Objective-C中静态变量使用方法 Objective-C中静态变量使用方法是本文要介绍的内容,Objective-C 支持全局变量,主要有两种实现方式:第一种和C/C++中的一样,使用&q ...

  3. ubuntu 终端只显示当前目录名称

    修改.bashrc文件: 原来: #修改终端提示颜色 color_prompt=yes if [ "$color_prompt" = yes ]; then PS1='${debi ...

  4. keil Ax51中条件编译指令IF与$IF的区别

    keil A51中条件编译指令IF与$IF的区别:1.IF和$IF是不等价的,不要混淆了;2.带前缀$的条件编译$IF用法:(汇编器指示命令Assembler Directive)只能用来测试由$SE ...

  5. CH Round #53 -【Nescafé 32】杯NOIP模拟赛

    A.GCD Path http://ch.ezoj.tk/contest/CH%20Round%20%2353%20-%E3%80%90Nescaf%C3%A9%2032%E3%80%91%E6%9D ...

  6. tyvj1039忠诚2

    描述 Description 老管家是一个聪明能干的人.他为财主工作了整整10年,财主为了让自已账目更加清楚.要求管家每天记k次账,由于管家聪明能干,因而管家总是让财主十分满意.但是由于一些人的挑拨, ...

  7. 自定义xcode文件模板

    下面两个路径都可以用于放模板文件 1. /Applications/Xcode.app/Contents/Developer/Library/Xcode/Templates/File Template ...

  8. jsp中iframe所包含的页面调用父页面的function方法

    a.jsp中写了注册的Ext窗体loginWindow,也用iframe包含了另一个b.jsp,当在b.jsp中也有点击注册的链接,这时需要用到调用a.jsp中的loginWindow,因为如果你重新 ...

  9. MyBatis3整合Spring3、SpringMVC3

    开发环境: System:Windows WebBrowser:IE6+.Firefox3+ JavaEE Server:tomcat5.0.2.8.tomcat6 IDE:eclipse.MyEcl ...

  10. hdu 5396 Expression(区间dp)

    Problem Description Teacher Mai has n numbers a1,a2,⋯,anand n−1 operators("+", "-&quo ...