粘性定位

postion 属性值共有6个:

  1. position: static // 默认值
  2. position: inherit // 继承父元素的postion值
  3. position: relative // 相对定位,遵循文档流
  4. position: absolute // 绝对定位,脱离文档流
  5. position: fixed // 固定定位
  6. position: sticky // 粘性定位

sticky是CSS规范中新加入的一个属性值。
这个属性值的作用表现为当一个列表元素位于一个可滚动区域内时,当滚动到特定的位置,例如顶部的时候,就会触发fixed特性,固定在顶部这样。
粘性定位的应用场景随处可见,例如segmentfault的文章页面中,顶部的导航条就使用了sticky。或者很多新闻类的app里面的粘性标题栏等等。

代码示例:

HTML

<main>
       <header>标题一</header>
       <div class="content">
       </div>
       <header>标题二</header>
       <div class="content">
       </div>
       <header>标题三</header>
       <div class="content">
       </div>
       <header>标题四</header>
       <div class="content">
       </div>
   </main>

CSS

main {
    width: 400px;
    height: 300px;
    margin: 200px auto;
    overflow: auto;
}
header {
    position: sticky;
    top: 0;
    height: 30px;
    background-color: blanchedalmond;
}

JS

let num = 20
let html = ''
for (var i = 0; i < num; i++) {
    html += `<p>${i + 1}</p>`
}
let contentsDom = document.getElementsByClassName('content')
let contentsArr = [...contentsDom]
contentsArr.forEach(item => {
    item.innerHTML = html
})

 

本站文章如未注明均为原创 | 文章作者:刘晓帆 | 转载请注明来自:前端印象

发表评论

邮箱地址不会被公开。 必填项已用*标注

浏览量:96 次浏览