怎么将导航栏始终固定在窗口顶部?

2025-06-03 05:10:10
推荐回答(2个)
回答1:

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

     固定在窗口顶部 *{
  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;}
  

        前台专区
        后台专区
        交流专区
      
大家拖动滚动条下吧 我很长 这样就能看到导航栏固定的效果了 

回答2:

导航栏导航栏显示在状态栏下方的应用程序屏幕顶部,可以通过一系列分层屏幕进行导航。当显示新屏幕时,通常标有前一屏幕标题的后退按钮显示在栏的左侧。有时,导航栏的右侧包含一个控件,如“编辑”或“完成”按钮,用于管理活动视图中的内容。
在拆分视图中,导航栏可能会显示在拆分视图的单个窗格中。导航栏是半透明的,可以具有背景色调,并且可以配置为在键盘在屏幕上,发生手势或视图调整大小时隐藏。

相关问答
最新问答