css新增属性position:sticky
2019-04-18 本文已影响0人
织雪纱奈
position:sticky是css定位新增属性；可以说是相对定位relative和固定定位fixed的结合；它主要用在对scroll事件的监听上；简单来说，在滑动过程中，某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top：100px)；position:sticky这时的效果相当于fixed定位，固定到适当位置。
1、父元素不能overflow:hidden或者overflow:auto属性。
2、必须指定top、bottom、left、right4个值之一，否则只会处于相对定位
3、父元素的高度不能低于sticky元素的高度
4、sticky元素仅在其父元素内生效
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
div {
font-size: 30px;
text-align: center;
color: #fff;
}
#box{
width:500px;
height:500px;
overflow:auto;
margin:100px;
}
.container {
background: #eee;
width: 400px;
height: 1000px;
margin: 120px auto;
}
.sticky{
height: 60px;
line-height: 60px;
position:sticky;
background-color:green;
margin-bottom: 30px;
top:50px;
}
</style>
</head>
<body>
<div id="box">
<div class="container">
<div class="sticky">蚂蚁部落</div>
</div>
</div>
<script>
var p1=new Promise((resolve,rej) => {
console.log('没有resolve')
// throw new Error('手动返回错误')
setTimeout(() => {
throw "error";
}, 0);
// rej('失败了')
})
p1.then(data =>{
console.log('data::',data);
},err=> {
console.log('err::',err)
}).catch(
res => {
console.log('catch data::', res)
})
</script>
</body>
</html>
