vue 滚动吸顶效果

最近做vue项目需要一个滚动吸顶的效果，实现的效果如下。

<template>
  <div>
    <div style='' class='head' id='head'>
      <img src='../../../static/image/banner.jpg' class='banner'>
      <div class='head-bot'>
        <mt-cell title="某某保险产品">
          <slot><img src='../../../static/image/top.png' class='logo'>某某保险公司</slot>
        </mt-cell>
      </div>
    </div>
    <div  style='margin: 10px 0' id='main'>
      <mt-cell title="标题文字"></mt-cell>
      <mt-cell title="标题文字" value="说明文字"></mt-cell>
      <mt-cell title="标题文字" value="说明文字"></mt-cell>
      <mt-cell title="标题文字" value="说明文字"></mt-cell>
      <mt-cell title="标题文字" value="说明文字"></mt-cell>
      <mt-cell title="标题文字" value="说明文字"></mt-cell>
      <mt-cell title="标题文字" value="说明文字"></mt-cell>
      <mt-cell title="标题文字" value="说明文字"></mt-cell>
      <mt-cell title="标题文字" value="说明文字"></mt-cell>
    </div>

    <div class="searchBar" id="searchBar" ref='briefContain'>
<----占位的div----->
      <div ref="tabPlaceholder" id='tabPlaceholder' style="height:41px; background: #fff;width: 100%" >
      </div>
<----占位的div----->
      <ul  ref='briefTab' class='isFixed' style="opacity: 1;z-index: 100">
        <li @click='tabChange("1")' :class='{"ac": whichTab=="1"}'>区域</li>
        <li @click='tabChange("2")'  :class='{"ac":whichTab=="2"}'>价格</li>
        <li @click='tabChange("3")' :class='{"ac": whichTab=="3"}'>房型</li>
        <li @click='tabChange("4")'  :class='{"ac":whichTab=="4"}'>更多</li>
        &l