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

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <link rel="stylesheet" href="css/style.css"/>

        <script type="text/javascript" src="js/nav-top.js" ></script>

    </head>

    <body>

        <div id="nav">

            <ul>

                <li></li>

                <li></li>

                <li></li>

                <li></li>

            </ul>

        </div>

        <div id="content">

        </div>

    </body>

</html>
*

{

    padding: ;

    margin: ;

}

#nav

{

    width: 800px;

    height: 50px;

    background: red;

    margin: auto;

    position: absolute;

    left: 514px;

    top: 50px;

}

#nav ul li

{

    text-decoration: none;

    list-style: none;

    float: left;

    width: 180px;

}

#content

{

    width: 800px;

    height: 1500px;

    background: black;

    margin: auto;

    margin-top: 50px;

}
window.onload =scroll;

addEventListener("scroll",getHeight);

function getHeight ()

{

    var scrollHeigh = document.body.scrollTop;

    if(scrollHeigh > )

    {

        document.getElementById('nav').style.top=scrollHeigh+"px";

    }else

    {

        document.getElementById('nav').style.top=+"px";

    }

}

document.body.scrollTop

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

网页可见区域宽： document.body.clientWidth

网页可见区域高： document.body.clientHeight

网页可见区域宽： document.body.offsetWidth (包括边线的宽)

网页可见区域高： document.body.offsetHeight (包括边线的高)

网页正文全文宽： document.body.scrollWidth

网页正文全文高： document.body.scrollHeight

网页被卷去的高： document.body.scrollTop

网页被卷去的左： document.body.scrollLeft

网页正文部分上： window.screenTop

网页正文部分左： window.screenLeft

屏幕分辨率的高： window.screen.height

屏幕分辨率的宽： window.screen.width

屏幕可用工作区高度： window.screen.availHeight

屏幕可用工作区宽度： 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. 树形DP +01背包（HDU 1011）

    题意:有n个房间,有n-1条道路连接着n个房间,每个房间都有若干个野怪和一定的能量值,有m个士兵从1房间入口进去,到达每个房间必须要留下若干士兵杀死所有的野怪,然后其他人继续走,(一个士兵可以杀死20 ...

  2. 某个点到其他点的曼哈顿距离之和最小（HDU4311）

    Meeting point-1 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) ...

  3. 直关的sql 联级更新语句

    在sql-server中用这种写法最直观:UPDATE a SET a.c = b.c FROM table1 ainner join table2 b on b.a=a.aWHERE a.c is ...

  4. MVC权限管理系统dwpro项目权限按钮无故自动消失问题

    关于那个权限按钮丢失的问题修改方法如下: 把源文件中的XmlConfig文件夹里的Config.xml文件剪切到根目录下,并修改文件名为:app.config(关键是后缀不是xml了是config) ...

  5. Uploadify在MVC中使用方法案例（上传单张图片）

    在View视图中: <link href="/Scripts/uploadify-v3.2.1/uploadify.css" rel="stylesheet&quo ...

  6. notepad++ 行末尾添加指定字符

    在查找目标中输入“^”代表行首,“$”代表行末,下方的查找模式要改成“正则表达式”. 如果替换中有字符,则用“\”转义, 例如 : 目标中输入: $  替换字符输入:     \,   则是每行后面加 ...

  7. java 项目打包流程速记

    1.与资源库同步 2.[解决冲突] --可能没有这一步 3.合并标记 4.清除一下项目-- clean 5.打包: run As -->Maven install 6.去服务备份原包,下载服务 ...

  8. c# 获取路径的几种方法

    1.取得控制台应用程序的根目录方法 方法1.Environment.CurrentDirectory 取得或设置当前工作目录的完整限定路径方法2.AppDomain.CurrentDomain.Bas ...

  9. springmvc转发与重定向

    摘自http://elf8848.iteye.com/blog/875830 (1)我在后台一个controller跳转到另一个controller,为什么有这种需求呢,是这样的.我有一个列表页面,然 ...

  10. SqlSever中Index Seek的匹配规则（一）

    我们知道在SqlServer中,索引对查询语句的优化起着巨大的作用,一般来说在执行计划中出现了Index Seek的步骤,我们就认为索引命中了.但是Index Seek中有两个部分是值得我们注意的,我 ...