<template>
  <div>
    <div style="width: 100%; height: 0.36rem; background-color: #fff"></div>
    <div class="status-bar">
      <slot></slot>
    </div>
    <div v-if="!flag" class="status-bar sticky">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      flag: true,
    };
  },

  mounted() {
    var top = document.querySelector(".status-bar").offsetTop;
    let h =
      window.screen.height - document.querySelector(".status-bar").clientHeight;
    window.onscroll = (e) => {
      if (window.pageYOffset >= top) {
        this.flag = false;
      } else {
        this.flag = true;
      }

      if (window.pageYOffset >= h) {
        this.$emit("fixed");
      } else {
        this.$emit("deFixed");
      }
    };
  },
};
</script>

<style scoped>
.status-bar {
  width: 100%;
  height: 0.92rem;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;

  font-size: 0.36rem;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #000000;
  line-height: 0.36rem;
}

.sticky {
  /* position: -webkit-sticky; */
  position: fixed;
  top: 0;
  z-index: 10;
}
</style>