vue 元素吸顶

我的比较简单，就单纯的导航元素吸顶，核心代码如下：

.isFixed {

  position: fixed;

  background-color: #fff;

  top: 0px;

   47%;

}

页面的完整代码如下：

<template>
  <a-spin :spinning="confirmLoading">
    <a-tabs default-active-key="1"
            v-show="searchBarFixed"
            class="isFixed"
            @change="callback">
      <a-tab-pane tab="基础信息"
                  key="1" />
      <a-tab-pane tab="项目信息"
                  key="2">
      </a-tab-pane>
      <a-tab-pane tab="公共标签"
                  key="3">
      </a-tab-pane>
    </a-tabs>

    <div class="contentview">
      <!-- 第一部分 -->
      <div class="information"
           id="contentone">
        <div class="informationtitle">
          <p>基本信息</p>
        </div>
        <div class="informationcontent">
          <table>
            <tr>
              <td>
                qqq
              </td>
            </tr>
            <tr>
              <td>
                qqq
              </td>
            </tr>
            <tr>
              <td>
                qqq
              </td>
            </tr>
            <tr>
              <td>
                qqq
              </td>
            </tr>
            <tr>
              <td>
                qqq
              </td>
            </tr>
            <tr>
              <td>
                qqq
              </td>
            </tr>
            <tr>
              <td>
                qqq
              </td>
            </tr>
            <tr>
              <td>
                qqq
              </td>
            </tr>
            <tr>
              <td>
                qqq
              </td>
            </tr>
            <tr>
              <td>
                qqq
              </td>
            </tr>
            <tr>
              <td>
                qqq
              </td>
            </tr>
            <tr>
              <td>
                qqq
              </td>
            </tr>
            <tr>
              <td>
                qqq
              </td>
            </tr>
            <tr>
              <td>
                qqq
              </td>
            </tr>
            <tr>
              <td>
                qqq
              </td>
            </tr>
            <tr>
              <td>
                qqq
              </td>
            </tr>
            <tr>
              <td>
                qqq
              </td>
            </tr>
            <tr>
              <td>
                qqq
              </td>
            </tr>
            <tr>
              <td>
                qqq
              </td>
            </tr>
            <tr>
              <td>
                qqq
              </td>
            </tr>
            <tr>
              <td>
                qqq
              </td>
            </tr>
          </table>
        </div>
      </div>
      <!-- 第二部分 -->
      <div id="contenttwo"
           class="information">
        <div class="informationtitle">
          <p>项目信息</p>
        </div>
        <div class="informationcontent">
          <table>
            <tr>
              <td>
                qqq
              </td>
            </tr>
            <tr>
              <td>
                qqq
              </td>
            </tr>
            <tr>
              <td>
                qqq
              </td>
            </tr>
            <tr>
              <td>
                qqq
              </td>
            </tr>
            <tr>
              <td>
                qqq
              </td>
            </tr>
            <tr>
              <td>
                qqq
              </td>
            </tr>
            <tr>
              <td>
                qqq
              </td>
            </tr>
            <tr>
              <td>
                qqq
              </td>
            </tr>
            <tr>
              <td>
                qqq
              </td>
            </tr>
            <tr>
              <td>
                qqq
              </td>
            </tr>
            <tr>
              <td>
                qqq
              </td>
            </tr>
            <tr>
              <td>
                qqq
              </td>
            </tr>
            <tr>
              <td>
                qqq
              </td>
            </tr>
            <tr>
              <td>
                qqq
              </td>
            </tr>
            <tr>
              <td>
                qqq
              </td>
            </tr>
            <tr>
              <td>
                qqq
              </td>
            </tr>
            <tr>
              <td>
                qqq
              </td>
            </tr>
            <tr>
              <td>
                qqq
              </td>
            </tr>
            <tr>
              <td>
                qqq
              </td>
            </tr>
            <tr>
              <td>
                qqq
              </td>
            </tr>
            <tr>
              <td>
                qqq
              </td>
            </tr>
          </table>

        </div>
      </div>
      <!-- 第三部分 -->
      <div id="contentthree"
           class="information">
        <div class="informationtitle">
          <p>公共标签</p>
        </div>
        <div class="informationcontent">
          <table>
            <tr>
              <td>
                qqq
              </td>
            </tr>
            <tr>
              <td>
                qqq
              </td>
            </tr>
            <tr>
              <td>
                qqq
              </td>
            </tr>
            <tr>
              <td>
                qqq
              </td>
            </tr>
            <tr>
              <td>
                qqq
              </td>
            </tr>
            <tr>
              <td>
                qqq
              </td>
            </tr>
            <tr>
              <td>
                qqq
              </td>
            </tr>
            <tr>
              <td>
                qqq
              </td>
            </tr>
            <tr>
              <td>
                qqq
              </td>
            </tr>
            <tr>
              <td>
                qqq
              </td>
            </tr>
            <tr>
              <td>
                qqq
              </td>
            </tr>
            <tr>
              <td>
                qqq
              </td>
            </tr>
            <tr>
              <td>
                qqq
              </td>
            </tr>
            <tr>
              <td>
                qqq
              </td>
            </tr>
            <tr>
              <td>
                qqq
              </td>
            </tr>
            <tr>
              <td>
                qqq
              </td>
            </tr>
            <tr>
              <td>
                qqq
              </td>
            </tr>
            <tr>
              <td>
                qqq
              </td>
            </tr>
            <tr>
              <td>
                qqq
              </td>
            </tr>
            <tr>
              <td>
                qqq
              </td>
            </tr>
            <tr>
              <td>
                qqq
              </td>
            </tr>
          </table>

        </div>
      </div>

    </div>

  </a-spin>

</template>
<script>
export default {
  props: {
    afterSubmit: {
      type: Function,
      default: null
    }
  },
  data () {
    return {
      confirmLoading: false,
      searchBarFixed: true
    }
  },
  methods: {
    openForm (id) {
      this.visible = true
    },
    callback (key) {
      switch (key) {
        case "1": document.querySelector("#contentone").scrollIntoView(true); break;
        case "2": document.querySelector("#contenttwo").scrollIntoView(true); break;
        case "3": document.querySelector("#contentthree").scrollIntoView(true); break;
      }
    },

  },

}
</script>

<style  scoped>
.contentview {
  font: 16px verdana, arial, sans-serif; /* 设置文字大小和字体样式 */
   100%;
  margin-top: 40px;
}
.isFixed {
  position: fixed;
  background-color: #fff;
  top: 0px;
   47%;
}
.information {
}
.information .informationtitle {
}
.information .informationcontent {
}
.information .informationtitle p {
  display: block; /*将链接设为块级元素 */
  /* 150px;  设置宽度 */
  /*height: 30px;  设置高度 */
  line-height: 30px; /* 设置行高，将行高和高度设置同一个值，可以让单行文本垂直居中 */
  text-align: center; /* 居中对齐文字 */
  background: #3a4953; /*设置背景色 */
  color: #fff; /*设置文字颜色 */
  border-right: 1px solid #000; /* 在左侧加上分隔线 */
}
</style>

本来想做个滚动条监听的，但是我这个是抽屉中的页面展示，抽屉中的滚动条我监听不到，也就不再搞那么麻烦了