HTML+CSS导航栏在滚动窗口时贴在窗口顶部
置顶的优点1.减少跳出率：如果是从搜寻引擎而来的访客，对我们网站不熟，文章读完、资料找到后，没有个吸引注意力的设计，通常就直接离开了。那么如果浮动导览列恰巧有个访客有兴趣的主题，就有机会留住这位客人了。
2.随时提供导航：不是每个上网的人都很熟悉网站的构造、摆设位置等，那么这个浮动导览列只要项目设计得好，就能让这位迷途羔羊的网路生手有一个很好的重点指引。
3.节省操作：导览列置顶可以省去按「回到顶端」这个按钮，网页可以少安装、执行一个区块，而且「回到顶端」按钮有时会遮住一些文字。
实现方法导航栏下拉至一定高度后固定在顶部的特效。实现的方法有好多种，这里介绍个最简单易懂的方法。通过jQuery添加移除类来实现
注意：dispaly:fixed；会使元素脱离文档，不占据文档空间。所以页面会有一些跳动，这时可以给相邻元素加上nav所占高度的margin-top或padding-top即可
（1）“导航栏下拉至一定高度后固定在顶部的特效”，也有同学喜欢叫跟随导航什么的。反正就是这个么意思。先直接上代码：
将这个js放到要实现效果的页面里面去，然后我们要修改的是第三行的.nav，“nav“改成你自己页面导航栏的class；第七行的”100“为下拉到100个像素的时候触发特效，可以自行修改至合适的高度。
（2）然后在css文件里面增加这个属性：
这样就差不多完成了。
讲下这个js的意思，判断下拉到一定高度的时候，给导航栏的div插入一个”fixednav“属性，然后给”fixednav“加上固定在顶部的参数。
1、在电脑上打开软件，新建一个html文件，在head部分，编写css样式， list-style-type: none;是除掉导航前面默认带的点，li a，li a.active ，li a:hover:not(.active) 设置鼠标滑到导航栏的颜色变化。
2、在html页面body里面编写导航栏内容，可以看到是通过的格式来实现导航。
3、在浏览器中打开页面，可以看到已经制作成了一个比较美观的垂直导航栏。
4、将鼠标滑向垂直导航栏的列表项上，可以看到列表项颜色发生变化。
5、也可以制作成水平导航栏，overflow: hidden;代码的意思是超出高度和宽度的部分自动隐藏，float: left;使导航栏水平显示。
6、在浏览器中打开页面，可以看到制作出美观的水平导航栏，已经置顶了。
在很多的网站导航栏或者类似于导航栏的一些功能一直能够固定在网页的顶部，就算是下拉滚动条也不会被窗口所遮挡，这样的功能往往非常的使用，下面就简单介绍一下如何实现此种功能。先看一段代码实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
*{
padding:0px;
margin:0px;
}
body, ul, li{
background-color:white;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
text-align:center;
}
#main{
width:20px;
height:1000px;
margin:0px auto;
background-color:#CCC;
}
#nav{
width:500px;
margin:0px auto;
position:fixed;/*固定作用*/
top:0px;
left:490px;
/*ie6下样式，加下划线表示只针对ie6 的hack */
_position:absolute;/* 把导航栏位置定义为绝对位置 关键*/
_top:expression(documentElement.scrollTop + "px"); /* 把导航栏位置放在浏览器垂直滚动条的顶端 关键 */
z-index:9999; /* 让导航栏浮在网页的高层位置，遇到flash和图片时候也能始终保持最外层 */
text-align:left;
}
a{
color:#000000;
text-decoration:none;
}
.menu{
width:120px;
height:18px;
margin:0px 4px 0px 0px;
background-color:#F5F5F5;
color:#999999;
border:1px solid #EEE8DD;
padding:6px 0px 0px 0px;
overflow-y:hidden;
cursor:hand;
display:inline;
list-style:none;
font-weight:bold;
float:left;
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li class="menu"><a href="#">前台专区</a></li>
<li class="menu"><a href="#">后台专区</a></li>
<li class="menu"><a href="#">交流专区</a></li>
</ul>
</div>
<div id="main">大家拖动滚动条下吧 我很长 这样就能看到导航栏固定的效果了 </div>
</body>
</html>
上面的代码已经实现了需要的功能，导航条固定在了网页的顶部，这个主要是使用了position:fixed，然后将top值设置为0即可，但是仅仅使用position:fixed还是不够，因为IE6浏览器并不支持，所以还需要进行浏览器兼容性设置，那就是添加以下代码即可:
_position:absolute;/* 把导航栏位置定义为绝对位置 关键*/
_top:expression(documentElement.scrollTop + "px"); /* 把导航栏位置放在浏览器垂直滚动条的顶端 关键 */
HTML JS CSS问题,在网易邮箱看到一个工具条会随着滚动
答：不用 right_top_box { position:fixed;top:200px;_position:absolute;_top:expression((document).documentElement.scrollTop+100);width:200px;height:130px;border:1px solid red;right:10px;z-index: 2000 } 最简单的CSS代码 兼容性很强 ...
div如何添加滚动条?
答：("#p_id").animate({scrollTop:100},300);以上代码可以实现，scrollTop表示向下滚到多少距离，300表示滚动动画时间，单位毫秒 Div+Css布局教程？正好自己以前写过，奉上最简短的代码，效果已亲测，兼容IE7/8以及Chrome等现代浏览器，代码如下：!doctypehtml> html> head> metacharset="utf-8"> tit...
html中div随滚动条移动
答：<style type="text/css"> .img{ position:absolute; width:100px; height:100px; top:100px; right:18px;} </style> <body> <div class="img" id="sroling" > <img src="images/png-1783.png" /> </div> <script type="text/javascript"> var id=function(i){return document...
html js 或者css怎么做到隐藏滚动条,但是依旧可以滚动
答：请使用nanoscroller.js插件，本人在目前项目中已使用，效果出众，可以显示或隐藏滚动条，不是浏览器自带的滚动条，而是插件本身的滚动条，效果非常棒！
CSS怎么把某个区域定在拉动滚动条的情况下一直显示在屏幕某个位置?
答：使用position:absolute;来定位：<!doctype html public "-//w3c//dtd html 4.0 transitional//en"><html><head><title>demo</title><style type="text/css">body{margin:0px;padding:0px;overflow:hidden;padding-top:22px;padding-bottom:22px;}div{margin:0px;padding:0px;}#header{back...
html的一个DIV样式,如何使内容滚动条隐藏,但依旧可以滚动?
答：需要准备的材料分别有：电脑、浏览器、html编辑器。1、首先，打开html编辑器，新建html文件，例如：index.html，编写问题基础代码。2、在index.html中的<head>标签中，加入css代码：<style>::-webkit-scrollbar{display: none;}</style>。3、浏览器运行index.html页面，此时没有显示滚动条确能仍然有...
dw cs6中做网站怎么设置成左侧导航栏滚动时不动只有右侧内容上下...
答：如@suyie001所说，css中position：fixed属性是可以实现题主的问题，但是在IE6下有Bug。不考虑IE6的话，可以参考下面链接实现。http://jingyan.baidu.com/article/4d58d541d54e879dd4e9c033.html 而图片那种属于左侧固定菜单，右侧自适应布局。自适应布局在现在的布局中，很容易遇见，下面是在平时工作...
html导航条怎么制作教程HTML制作导航条
答：html导航条有哪两部分？主要有ul>和li>标签组成。view如何创建一个导航条？view添加导航条，直接在html语言的模块中添加一个view标签元素，在元素里写入标签的内容，控制view的css样式，执行view添加的导航栏样式。dw怎么做纵向导航栏？方法步骤如下：1、首先打开计算机，在计算机内打开DWcc，然后在DWcc...
html中,input text 如何设置显示滚动条
答：input中text只接收单行文本，基本不会出现垂直滚动条。可以用css设置overflow为scroll或auto使之有滚动条，前者始终有滚动条，后者在必要时才显示。想要输入多行文本，应该使用textarea标签，滚动条设置和前所述一样。
