移动端基于vue吸顶效果,以及返回顶部
最近项目需要做一个吸顶的效果,整理了一下,说一下个人的一个大致得思路
首先吸顶呢,肯定有一个界限值,也就是一个吸顶效果出现得一个条件,那这个条件其实是看你自己需求,有了这个值,你在达到这个值得效果就出来了。如何做到吸顶效果,其实也就是在你得滚动条达到这个界限值得时候把你需要置顶得元素得定位方式改成fixed,就达到这个效果了。下面我们看代码
css
.box_fixed {
height: 40px;
margin: 0 auto;
line-height: 40px;
background: #eee;
width: 100%
}
h4 {
height: 40px;
line-height: 40px;
text-align: center;
}
.is_fixed {
position: fixed;
top: 0;
z-index: 999;
}
.getTop {
width: 60px;
height: 60px;
position: fixed;
bottom: 10px;
right: 10px;
border: 1px solid #eee;
border-radius: 50%;
text-align: center;