在css中，可以使用pos IT ion属性固定导航栏；只需要给导航栏元素添加“position: fixed;”样式进行固定定位即可。固定定位会使元素固定在窗口的某个位置，即使窗口滚动也不会移动，不会对窗口其他元素造成影响。
本教程操作环境：windows7系统、CSS3 && HT ML 5版、Dell G3 电 脑。
css固定导航栏的方法：
1、HTML部分：
创建一个ul标签用于 制作 无序列表，因为需要页面跳转的效果，还要在li标签中插入a标签，将导航内容写入a标签中。最后创建一个div，将div高度设为1500px，当滑动滚动条时，方便观察导航栏的位置，具体代码如下
<ul> <li><a class="active" hr ef=" # home">首页</a></li> <li><a href="#news">新闻动态</a></li> <li><a href="#contact">联系我们</a></li> <li><a href="#about">关于我们</a></li> </ul> <div style="background-color:pink;h ei ght:1500px;"></div>
2、CSS部分：
基本框架已经搭建出来了，现在用CSS美化页面，用 float: left将无序列表左边浮动，排列在一行，用Padding 调整 导航之间的间距，用hover伪 类选择器 设置鼠标悬停效果，当鼠标经过导航时呈现 红色 ，当导航被激活时，呈现黄色。
最 重要 的一步就是将导航栏固定在页面顶部，我们用 position: fixed 这个属性，生成固定定位的元素，相对于浏览器窗口进行定位。然后将它 距离 顶部的举例设为0（即top: 0），这样固定在顶部的导航就做好了，详细代码如下：
<style ty PE ="text/css">
*{m arg in:0;padding: 0;}
ul{
list -s tyle -t ype: none;
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}
li {
float: left;
}
li a {
dis play : block;
color: white;
text-align: center ;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: red ;
}
.active {
background-color: yellow;
}
</style>下面我们看一下实际效果：
当滑动鼠标后：
导航栏被固定住，最关键的一步就是使用定位 position并将其属性值设为 fixed，举例顶部的距离top设为0。
更多编程相关知识，请访问：编程视频！！
以上就是css如何固定导航栏的详细内容，更多请关注其它相关 文章 ！
总结
以上是 为你收集整理的 css如何固定导航栏 全部内容，希望文章能够帮你解决 css如何固定导航栏 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。