css粘性定位sticky的使用

在做h5页面的过程中，经常会遇到这种情况，页面滚动到一定位置的时候，那个元素需要固定在顶部，之前都是用js去计算再实现，其实用css来实现更加方便

html:

<div>
  <p>粘性定位</p>
</div>

css:

div{
  height:200px;
  margin-top:50px;
}
p{
  position:sticky;
  top:20px;
}

页面滚动到div的位置的时候，p元素就会浮动固定在顶部，超出div就不浮动了。

实际项目中可能还有其他的需求，例如p元素里面有很多子元素，点击哪个子元素就要滚动到指定的模块位置，或者是滚动到哪个模块位置的时候，p元素的对应子元素就要有选中效果。这种一般就要用js来实现。后面写个例子补上

 

补上js处理的例子：

在methods中添加监听事件handleScroll

handleScroll() {
    let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
    let top1 = this.$refs.head1[0].offsetHeight;
    //具体需求根据实际操作
    if (scrollTop > top1) {
        console.log('top2', top2);
    }
},

在mounted仲添加滚动监听

mounted() {
    window.addEventListener('scroll', this.handleScroll);
},

在destroyed中移除滚动监听

destroyed() {
    window.removeEventListener('scroll', this.handleScroll);
},

思路大概是这样，后面怎么操作就看具体需求