如何让CSS导航固定在页面顶端，本来是在底部固定的

html-css017

如何让CSS导航固定在页面顶端，本来是在底部固定的,第1张

#maximg

{z-index:999background:rgba(0, 0, 0, 0.8) none repeat scroll 0 0 !important

filter:Alpha(opacity=80)background:#000width:100%height:50pxposition:fixedtop:0

_position:absolute

_background-attachment:fixed

_top:expression(eval(document.documentElement.scrollTop))

_bottom:auto}

可能我误会了你的意思，这样的话你只需把z-index改成正值999就行了，你这负值肯定会在页面下面的。

以下代码已经实现了需要的功能，导航条固定在了网页的顶部，这个主要是使用position:fixed，然后将top值设置为0即可。

<!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>

通过js添加滚动事件，当滚动时判断滚动条距离顶端的高度是否达到固定导航条所需的高度

如果达到，为导航条添加position:fixed属性，否则去掉该属性

需要监听scroll事件，scrollY为滚动条距顶端距离，在监听函数里计算滚动条位置即可