CSS粘性布局吸顶位置：sticky与JavaScript滚动事件捕获手动实现
发布时间
阅读量：
阅读量
一、粘性布局吸顶position:sticky。
CSS3最新推出的position:sticky属性，能够在元素进入可视区域时保持原有位置，即等同于position:static的定位方式；而当元素滚动至屏幕外时，该属性会自动切换为position:fixed的固定定位模式，并使top、left、right、bottom等相关属性开始生效。
若未采用此特性，则需通过手动监听scroll事件来实现动态布局调整，然而这种方式会对性能造成一定影响，通常不建议使用。
需要注意的是，position:sticky布局在iPad设备上并不被支持。
示例demo：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
全部评论 (0)
还没有任何评论哟~