粘性定位兼容性问题
来源：9-7 表格布局详解
人生的起源
2022-02-17
粘性定位好像不兼容IE，有什么办法让它兼容吗？
1回答
-
你好，不支持黏性定位的，我们都是配合JS去模拟的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
height: 3000px;
}
div {
width: 400px;
height: 30px;
background: red;
position: absolute;
top: 100px;
}
</style>
</head>
<body>
<div>aaaaaaaaaaaaa</div>
<script>
let div = document.querySelector("div")
let divTop = div.offsetTop
window.onscroll = function () {
if (divTop <= pageYOffset) {
div.style.position = "fixed"
div.style.top = 0
} else {
div.style.position = "absolute"
div.style.top = divTop + "px"
}
}
</script>
</body>
</html>
012022-02-17
相似问题