Vue 实现页面顶端粘带效果

Vue  实现页面顶端粘带效果

      现在在做App的时候都要用到页面粘带效果，主要是用于在滑动页面时，某个组件到达顶端时，将此组件固定在顶端，效果如下图所示。（自己画的图，不好看请见谅！）

   简述：页面滑动，头部向上滑动，当绿色部分滑动到顶端时，绿色部分固定在顶端，内容部分继续滑动。

   

   完整例子代码：

         

<template>
  <div class="wrap" id="wrap">
    <div class="header">
      <div>头部部分的内容</div>
      <div>头部部分的内容</div>
      <div>头部部分的内容</div>
      <div>头部部分的内容</div>
    </div>
    <div class="content" :class=""{stick:show}">需要固定的部分</div>
    <div class="dliver" :style="{display:show? 'block':'none'}">