封装吸顶组件

封装吸顶组件

子组件：
html：

<template>
  <div>
    <div class="nav-bar" :class="{ is_fixed: isFixed }">你好啊，                 					  我叫jiejie
    </div>
  </div>
</template>

js
主要用的是scrolltop的距离来控制是否将组件定位改为fix，只需要用原生js即可实现。
我们在vue中使用。

<script>
export default {
  props: {}, // 组件参数 接收来自父组件的数据
  data() {
    return {
      //模拟数据
      isFixed: false
    };2
  },
  created() {
    //创建后
  },
  components: {}, // 局部注册的组件
  mounted() {
    //加载后
    window.addEventListener("scroll", this.initHeight);
  },
  watch: {}, // 负责监听
  computed: {}, // 计算属性
  methods: {
    //方法集合
    initHeight() {
      let scrollTop =
        window.pageYOffset || document.scrollTop || document.body.scrollTop;
      this.isFixed = scrollTop > 152 ? true : false;
    }
  },
  destroyed() {
    window.removeEventListener("scroll", this.initHeight);
  }
};
</script>

css样式

<style scoped lang="scss">
.is_fixed {
  position: fixed;
  top: 0;
  width: 50%;
  border:2px solid #ccc;
  // box-shadow: 0 5px 5px red;
}
</style>

哪个组件用在哪个里面调用