那个效果很多，比如hao123的头部

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <link rel="stylesheet" href="css/style.css"/>
  7.         <script type="text/javascript" src="js/nav-top.js" ></script>
  8.     </head>
  9.     <body>
  10.         <div id="nav">
  11.             <ul>
  12.                 <li></li>
  13.                 <li></li>
  14.                 <li></li>
  15.                 <li></li>
  16.             </ul>
  17.         </div>
  18.         <div id="content">
  19.  
  20.         </div>
  21.     </body>
  22. </html>
  1. *
  2. {
  3.     padding: ;
  4.     margin: ;
  5. }
  6. #nav
  7. {
  8.     width: 800px;
  9.     height: 50px;
  10.     background: red;
  11.     margin: auto;
  12.     position: absolute;
  13.     left: 514px;
  14.     top: 50px;
  15. }
  16. #nav ul li
  17. {
  18.     text-decoration: none;
  19.     list-style: none;
  20.     float: left;
  21.     width: 180px;
  22. }
  23. #content
  24. {
  25.     width: 800px;
  26.     height: 1500px;
  27.     background: black;
  28.     margin: auto;
  29.     margin-top: 50px;
  30. }
  1. window.onload =scroll;
  2. addEventListener("scroll",getHeight);
  3. function getHeight ()
  4. {
  5.     var scrollHeigh = document.body.scrollTop;
  6.     if(scrollHeigh > )
  7.     {
  8.         document.getElementById('nav').style.top=scrollHeigh+"px";
  9.     }else
  10.     {
  11.         document.getElementById('nav').style.top=+"px";
  12.     }
  13. }

document.body.scrollTop

document.body.offsetWidth + " (包括边线和滚动条的宽)";

  1. 网页可见区域宽： document.body.clientWidth
  2. 网页可见区域高： document.body.clientHeight
  3. 网页可见区域宽： document.body.offsetWidth (包括边线的宽)
  4. 网页可见区域高： document.body.offsetHeight (包括边线的高)
  5. 网页正文全文宽： document.body.scrollWidth
  6. 网页正文全文高： document.body.scrollHeight
  7. 网页被卷去的高： document.body.scrollTop
  8. 网页被卷去的左： document.body.scrollLeft
  9. 网页正文部分上： window.screenTop
  10. 网页正文部分左： window.screenLeft
  11. 屏幕分辨率的高： window.screen.height
  12. 屏幕分辨率的宽： window.screen.width
  13. 屏幕可用工作区高度： window.screen.availHeight
  14. 屏幕可用工作区宽度： window.screen.availWidth

jquery简单插件到复杂插件（3）--顶部导航固定的更多相关文章

  1. 使用 jquery 的 上传文件插件 uploadify 3.1 配合 java 来做一个简单的文件上次功能。并且在界面上有radio 的选择内容也要上传

    使用 jquery 的 上传文件插件 uploadify 3.1 配合 java 来做一个简单的文件上次功能.并且在界面上有radio 的选择内容也要上传 uploadify 插件的 下载和文档地址  ...

  2. 使用 ADD-ON SDK 开发 基于 Html JQuery 和 CSS 的 firefox 插件入门教程1: 创建一个简单的 Add-on

    [本文转载自http://sixpoint.me/942/implementing-simple-addon/] 实现一个简单的插件 教程的这个部分带你使用 SDK 来实现, 运行并打包一个插件. 这 ...

  3. 赞！带进度条的 jQuery 文件拖放上传插件

    jQuery File Uploader 是一个 jQuery 文件拖放上传插件,包括 Ajax 上传和进度条效果.作者编写这个插件的想法是要保持它非常简单,不像其他的插件,很多的标记,并提供一些 H ...

  4. jQuery 自定义网页滚动条样式插件 mCustomScrollbar 的介绍和使用方法(转)

    系统默认的滚动条样式,真的已经看的够恶心了.试想一下,如果在一个很有特色和创意的网页中,出现了一根系统中默认的滚动条样式,会有多么的别扭. 为了自己定义网页中的滚动条的方法,我真的已经找了很久了,就目 ...

  5. PgwSlideshow-基于Jquery的图片轮播插件

    0 PgwSlideshow简介 PgwSlideshow是一款基于Jquery的图片轮播插件,基本布局分为上下结构,上方为大图轮播区域,用户可自定义图片轮播切换的间隔时间,也可以通过单击左右方向按键 ...

  6. 推荐20款基于 jQuery & CSS 的文本效果插件

    jQuery 和 CSS 可以说是设计和开发行业的一次革命.这一切如此简单,快捷的一站式服务.jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQue ...

  7. 12款响应式的 jQuery 旋转木马（传送带）插件

    在企业网站,作品集网站,电子商务网站或任何其他类型的网站内容显示图片可以使用 jQuery 旋转木马(传送带)插件来实现. jQuery 旋转木马插件允许开发人员以水平或垂直的方式显示内容,视频和图像 ...

  8. 一款效果精致的 jQuery 多层滑出菜单插件

    想要以用户友好的方式呈现多级菜单是件不容易的事情,而且还要跨浏览器兼容就更难了.Multi-Level Push Menu 这款 jQuery 插件提供了呈现这种菜单的解决方案,能够让你无限制的展示菜 ...

  9. jQuery超炫酷按钮插件及源码

    现在大部分网页的按钮都是经过美化的,那些原始的浏览器按钮太过于枯燥乏味,让用户失去和网站交互的兴趣.早期我们都是通过背景图片来美化网页按钮,而现在我们可以利用扩展性更好的CSS3来制作漂亮的网页按钮, ...

随机推荐

  1. nyist 606 ACM之路

    http://acm.nyist.net/JudgeOnline/problem.php?pid=606 ACM之路 时间限制:1000 ms | 内存限制:65535 KB 描述 转眼间,12级新生 ...

  2. bzoj3192 [JLOI2013]删除物品

    用数组表示两个栈,将两个栈的栈顶并在一起,用树状数组维护一下操作即可. 代码 #include<cstdio> #include<algorithm> #include< ...

  3. PHP的几个常用加密函数（转载 https://jellybool.com/post/php-encrypt-functions）

    PHP的几个常用加密函数 在网站的开发过程中,常常需要对部分数据(如用户密码)进行加密,本文主要介绍PHP的几个常见的加密函数 MD5加密: string md5 ( string $str [, b ...

  4. ORA-12154的原因

    一个很难想到的引起ORA-12154的原因         使用OracleClient.OracleConnection时(我连的是Oracle 9i,其他版本未知),如果你的执行目录太长或者有括号 ...

  5. 11---Net基础加强

    替换邮箱用户名部分: using System; using System.Collections.Generic; using System.Linq; using System.Text; usi ...

  6. Openstack的镜像上传原理

    openstack的horizon的上传镜像流程 通过html的form表单上传文件 先上传到horizon指定的临时目录,存储起来 通过glance-api请求接口 实际上glance-api也是提 ...

  7. 通过进程检测服务时脚本文件名不要起要检测的服务名字命名 shell程序从上到下执行若定义函数或引用系统函数需先定义 kill -USR2

    通过进程检测服务时脚本文件名不要起要检测的服务名字命名 kill -USR2 `cat /var/run/mysqld.pid`

  8. django models数据类型

    Django Models的数据类型 AutoField IntegerField BooleanField true/false CharField maxlength,必填 TextField C ...

  9. Java字符串排列算法

    Java字符串排列算法 题目:现有ABCDE 5个球 构成的排列组合 可重复抽取 最多取到16个 共有多少种组合方式? 比如:取1个球可以构成的组合有 A B C D E 共5种,取2个球可以构成的组 ...

  10. MySQL存储过程循环添加数据

    经常需要测试数据,写个存储过程方便日后使用. DROP PROCEDURE IF EXISTS add_member; DELIMITER $$ CREATE PROCEDURE add_member ...