jquery简单插件到复杂插件（3）--顶部导航固定
那个效果很多，比如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）--顶部导航固定的更多相关文章
- 使用 jquery 的 上传文件插件 uploadify 3.1 配合 java 来做一个简单的文件上次功能。并且在界面上有radio 的选择内容也要上传
使用 jquery 的 上传文件插件 uploadify 3.1 配合 java 来做一个简单的文件上次功能.并且在界面上有radio 的选择内容也要上传 uploadify 插件的 下载和文档地址 ...
- 使用 ADD-ON SDK 开发 基于 Html JQuery 和 CSS 的 firefox 插件入门教程1: 创建一个简单的 Add-on
[本文转载自http://sixpoint.me/942/implementing-simple-addon/] 实现一个简单的插件 教程的这个部分带你使用 SDK 来实现, 运行并打包一个插件. 这 ...
- 赞！带进度条的 jQuery 文件拖放上传插件
jQuery File Uploader 是一个 jQuery 文件拖放上传插件,包括 Ajax 上传和进度条效果.作者编写这个插件的想法是要保持它非常简单,不像其他的插件,很多的标记,并提供一些 H ...
- jQuery 自定义网页滚动条样式插件 mCustomScrollbar 的介绍和使用方法(转)
系统默认的滚动条样式,真的已经看的够恶心了.试想一下,如果在一个很有特色和创意的网页中,出现了一根系统中默认的滚动条样式,会有多么的别扭. 为了自己定义网页中的滚动条的方法,我真的已经找了很久了,就目 ...
- PgwSlideshow-基于Jquery的图片轮播插件
0 PgwSlideshow简介 PgwSlideshow是一款基于Jquery的图片轮播插件,基本布局分为上下结构,上方为大图轮播区域,用户可自定义图片轮播切换的间隔时间,也可以通过单击左右方向按键 ...
- 推荐20款基于 jQuery & CSS 的文本效果插件
jQuery 和 CSS 可以说是设计和开发行业的一次革命.这一切如此简单,快捷的一站式服务.jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQue ...
- 12款响应式的 jQuery 旋转木马（传送带）插件
在企业网站,作品集网站,电子商务网站或任何其他类型的网站内容显示图片可以使用 jQuery 旋转木马(传送带)插件来实现. jQuery 旋转木马插件允许开发人员以水平或垂直的方式显示内容,视频和图像 ...
- 一款效果精致的 jQuery 多层滑出菜单插件
想要以用户友好的方式呈现多级菜单是件不容易的事情,而且还要跨浏览器兼容就更难了.Multi-Level Push Menu 这款 jQuery 插件提供了呈现这种菜单的解决方案,能够让你无限制的展示菜 ...
- jQuery超炫酷按钮插件及源码
现在大部分网页的按钮都是经过美化的,那些原始的浏览器按钮太过于枯燥乏味,让用户失去和网站交互的兴趣.早期我们都是通过背景图片来美化网页按钮,而现在我们可以利用扩展性更好的CSS3来制作漂亮的网页按钮, ...
随机推荐
- codevs 1203 判断浮点数是否相等
http://codevs.cn/problem/1203/ 1203 判断浮点数是否相等 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 青铜 Bronze 题解 查看运行 ...
- C++之路起航——标准模板库（vector）
vector(动态数组或向量):动态分配内存空间的线性储存结构. 需要包括头文件<vector> 定义: vector<数据类型> 变量名: Eg: vector<int ...
- SpringMvc项目分析
首先在配置文件中配置一个视图解析器,视图解析器规定了视图解析的规则,即controller处理请求之后,返回给DispatcheServlet一个字符串(也可能是ModelAndView之类的),而D ...
- Spring中Bean的配置：基于XML文件的方式
Bean的配置一共有两种方式:一种是基于XML文件的方式,另一种是基于注解的方式.本文主要介绍基于XML文件的方式 <bean id="helloWorld" class=& ...
- UBoot讲解和实践-----------讲解（一）
Boot Loader之ARM Uboot移植 阶段一 理论篇 1.boot loader需要完成的任务: 1>设计程序的入口地址 2&g ...
- 「thunar」给thunar增加搜索文件功能
1.安装catfish sudo apt-get install catfish 2.配置thunar,添加［自定义动作］ 打开 Thunar 后,点击 Edit -> Configure cu ...
- thinkphp 一个页面使用2次分页的方法
thinkphp内置ORG.Util.Page方法分页,使分页变得非常简单快捷. 但是如果一个页面里需要使用2次分页,就会产生冲突,这里先记录下百度来的解决办法 可以说是毫无技术含量的办法: 将Pag ...
- Elasticsearch--Date math在索引中的使用
在Elasticsearch,有时要通过索引日期来筛选某段时间的数据,这时就要用到ES提供的日期数学表达式 描述: 特别在日志数据中,只是查询一段时间内的日志数据,这时就可以使用日期数学表达式,这样可 ...
- nginx负载均衡的实现
将一台nginx主机当作前端负载均衡服务器,后面通过交换机链接多台web服务器,提供html和php的web界面服务.通过配置前端负载均衡服务器,可以实现将html界面和php界面的分开访问,即htm ...
- 关于mac book 的启动选项
苹果电脑是用EFI的,没有BIOS,唯一可以设置的是开机的启动选项.可以在基于 Intel 的 Mac 电脑上使用下列启动键组合启动时按住 C 键——从可启动 CD 或 DVD 光盘启动,如随机附带的 ...