HTML5怎么把导航固定在底部的步骤如下：
css的定位样式属性来实现；会用到css中的position：fixed属性，结合来实现。
<style>.foot-menu{width:100%height:60pxbackground:#000position:fixedbottom:0/**距离底部为0*/left:0z-index:1}</style><div class="foot-menu">
<!---导航具体内容-->
</div>
拓展资料css3网页底部固定导航是一款纯css3实现的网页底部固定导航菜单。特性介绍：
1、边框特性
CSS3对网页中的边框进行了一些改进，主要包括支持圆角边框、多层边框、边框色彩与图片等。在CSS3中最常用的一个改进就是圆角边框，通过CSS3的属性可以快速实现圆角定义，同时还可以根据实际情况针对特定角进行圆角定义 。
2、多背景图
CSS3允许使用多个属性(比如background-image、background-repeat、background-size、background-position、background-origin和background-clip等)在一个元素上添加多层背景图片。
HTML5让导航栏固定顶部不动且不遮挡住下面的DIV方法如下：
1，首先在html中，添加良好的导航内容。
2，后者是网页的具体内容，这里的代码比较简单。
3，在样式中，首先在菜单中定义一些样式。
4，此时，在运行页面时，滚动条滚动后导航将消失。
5，为了将导航栏固定在顶部，可以添加样式位置：固定；最高：0在导航容器中，键是第一个样式，因此其位置是固定的。
6，此时，页面开始运行，页面向上滚动，并且导航始终在顶部。
<!doctype html><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>TEST</title>
<style>
h1{
margin: 0
}
body{
margin: 0
height: 100%
background-color: #f3f3f3
}
.header {
padding: 15px 0
background-color: #fff
border-bottom: 1px solid #ccc
text-align: center
width: 100%
}
.fiexd .header{
position: fixed
top: 0
}
.fiexd ul{
margin-top: 84px
}
</style>
</head>
<body>
<ul>
<li>
<h2>列表 1</h2>
</li>
<li>
<h2>列表 2</h2>
</li>
<li>
<h2>列表 3</h2>
</li>
<li>
<h2>列表 4</h2>
</li>
<li>
<h2>列表 5</h2>
</li>
<li>
<h2>列表 6</h2>
</li>
<li>
<h2>列表 7</h2>
</li>
<li>
<h2>列表 8</h2>
</li>
</ul>
<div class="header"><h1>我是一个标题</h1></div>
<ul>
<li>
<h2>列表 1</h2>
</li>
<li>
<h2>列表 2</h2>
</li>
<li>
<h2>列表 3</h2>
</li>
<li>
<h2>列表 4</h2>
</li>
<li>
<h2>列表 5</h2>
</li>
<li>
<h2>列表 6</h2>
</li>
<li>
<h2>列表 7</h2>
</li>
<li>
<h2>列表 8</h2>
</li>
<li>
<h2>列表 9</h2>
</li>
<li>
<h2>列表 10</h2>
</li>
<li>
<h2>列表 11</h2>
</li>
<li>
<h2>列表 12</h2>
</li>
<li>
<h2>列表 13</h2>
</li>
<li>
<h2>列表 14</h2>
</li>
<li>
<h2>列表 15</h2>
</li>
</ul>
<script>
var header = document.getElementsByClassName('header')[0]
var body = document.body
window.onscroll = function () {
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
console.log(scrollTop)
if(scrollTop > 100) {
body.className = 'fiexd'
} else {
body.className = ''
}
}
</script>
</body>
</html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）