CSS实现头部、页脚滚动和固定在⼀般的⽹站中都会有头部和页脚。
头部会⼀直固定在最上⾯位置。
页脚呢，当页⾯内容超出⼀屏时，页脚在内容最后，当不⾜⼀屏时，在页⾯最下⾯。
实现⽅式有很多。这⾥使⽤的是 position:sticky;
sticky
sticky 粘性定位。是css新增的⼀个position属性。
为什么说是粘性定位，从适⽤场景来看：⼀开始显⽰，滚动到⼀定位置需要显⽰的元素。
在没有达到设置的粘着位置时，和正常元素⼀样，达到粘着距离，就好⼀直保持这个位置。
使⽤注意事项：
  1、⽗元素不能有 overflow 属性
  2、left、top、right、bottom 必须要有⼀个
  3、仅在⽗元素内⽣效，⽗元素的⾼度必须⼤于 sticky 元素⾼度
  4、兼容加 -webkit 前缀
下⾯是最简单的 header 使⽤：
.header{
position:sticky;
top:0;
cssclass属性
}
实现
下⾯是实现，头部和页脚的滚动和固定。
HTML 部分：
<div class="layout">
<div class="header">
</div>
<div class="footer">
</div>
</div>
CSS 部分：
.layout {
width: 100%;
min-height: 100%;    // 这是为了 footer 在内容不⾜时能在最下⾯
// height: 100%;  // 设置遮盖属性，sticky 超过这个⾼度就会消失
.header {
position: sticky;
top: 0;
display: flex;
width: 100%;
height: 80px;
}
.footer {
position: sticky;
top: calc(100% - 80px);
height: 80px;
}
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。