<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>
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等)在一个元素上添加多层背景图片。
