vue页签遇顶浮动效果

页签遇顶浮动，就是当div检测滑动到顶部时，固定在顶部，下文则继续滑动的效果

这个效果是目前常用的形式，分享一下。

1、vue页面里先表明要页签标签

 <div class="test-page" v-if="searchBarFixed"></div>
   <div class="test-page" id="test-page" :class="{'p-fixed':searchBarFixed}">页签</div>

为啥要用两个呢，其实第一个div是用来占位的，当页面遇顶浮动时，页面就会将页签的位置用下面的标签补充上去，就造成了页面下面的部分内容看不到的情况，用一个占位就解决了。

2、less 

 .test-page {
        background-color: aqua;
        position: relative;
        width: 100%;
        height: 0.3rem;
    }

    .p-fixed {
        position: fixed;