HTML+CSS导航栏在滚动窗口时贴在窗口顶部

大家拖动滚动条下吧 我很长 这样就能看到导航栏固定的效果了 上面的代码已经实现了需要的功能,导航条固定在了网页的顶部,这个主要是使用了position:fixed,然后将top值设置为0即可,但是仅仅使用position:fixed还是不够,因为IE6浏览器并不支持,所以还需要进行浏览器兼容性设置,那就是添加以下代...
HTML+CSS导航栏在滚动窗口时贴在窗口顶部
怎么将导航栏始终固定在窗口顶部

在很多的网站导航栏或者类似于导航栏的一些功能一直能够固定在网页的顶部,就算是下拉滚动条也不会被窗口所遮挡,这样的功能往往非常的使用,下面就简单介绍一下如何实现此种功能。先看一段代码实例:
<!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"); /* 把导航栏位置放在浏览器垂直滚动条的顶端 关键 */2017-07-18
mengvlog 阅读 12 次 更新于 2025-06-22 07:32:55 我来答关注问题0
  • _position:absolute;/* 把导航栏位置定义为绝对位置 关键*/ _top:expression(documentElement.scrollTop + "px"); /* 把导航栏位置放在浏览器垂直滚动条的顶端 关键 */

  •  宸辰游艺策划 html怎么在下拉的选项中添加滚动条,就像这个图片右边的这种?

    要在下拉选项中添加滚动条,可以使用HTML和CSS实现。首先,创建一个包含选项的下拉菜单。这可以使用标签完成。接下来,为包含下拉菜单的父元素设置一个固定的高度和宽度,并设置overflow-y为scroll。这样,当下拉菜单的内容超过父元素的高度时,就会出现垂直滚动条。以下是一个简单的示例代码:

  •  誉祥祥知识 如何写一个网页上右侧的悬浮导航栏,用html语言。

    在网页设计中,实现一个固定位置的导航栏,让其在用户滚动页面时依然保持在屏幕右侧,是提高用户体验的有效方法。为了达成这一效果,你需要在HTML代码中加入一个div元素来承载导航栏内容,并利用CSS进行样式设定。首先,在HTML文件中插入一个div元素,该元素应包含所有的导航链接和其他需要展示的内容,如:

  • 步骤一:HTML结构调整 在`index.html`中,针对头部导航添加8个超链接,实现导航栏的基本结构。步骤二:CSS样式调整 在`bd.css`文件中,对头部左侧的`div`(`head-left`)应用左内边距样式,确保导航链接有足够的间距。同时,定义导航链接的样式和鼠标悬浮时的颜色变化。步骤三:去除背景颜色 注释掉`he...

  • 4、第二种方法就是就是将p设置为display:table;将ul设置成display:table-cell;即可。5、第三种方法就是使用display:inline-flex,css代码如图所示。6、这种方法的html是套用一个p即可如图所示。7、然后将下图中的css代码写入CSS文件中即可。css导航栏鼠标hover的时候就出现下拉菜单,怎么做的?选择鼠标...

檬味博客在线解答立即免费咨询

CSS相关话题

Copyright © 2023 WWW.MENGVLOG.COM - 檬味博客
返回顶部