<template>
  <div>
    <div class="sticky" v-show="shouldShow">
      <div
        class="sticky-box"
        @click="navigateTo(index)"
        v-for="(item, index) in sections"
        :key="index"
      >
        {{ item.title }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'StickyNavigation',
  props: {
    // 接收父组件传递的导航项数据
    sections: {
      type: Array,
      required: true,
      default: () => []
    }
  },
  data() {
    return {
      shouldShow: false
    }
  },
  methods: {

    // handleScroll(){

    //   console.log("滚动条事件");


    // },
    checkScreenHeight() {

      console.log(9999);

      const screenHeight = window.innerHeight;
      // 可以根据实际需求调整阈值
      this.shouldShow = screenHeight >= 900;


    },
    // 点击导航项时，向父组件发送事件和索引
    navigateTo(index) {
      // console.log('子组件触发导航，索引:', index);
      // $emit 向父组件发送 'navigate' 事件，并传递索引
      this.$emit('navigate', index);
    }
  },
  mounted() {
    this.checkScreenHeight();
    // window.addEventListener('scroll', this.handleScroll);
  },
  beforeDestroy() {
    // window.removeEventListener('scroll', this.handleScroll);
  }
}
</script>

<style lang="less" scoped>
.sticky {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  z-index: 100;
  padding: 10px 0;
}

.sticky-box {
  font-size: 16px;
  font-weight: 500;
  margin: 0 20px;
  padding: 10px 20px;
  color: #000;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.sticky-box:hover {
  color: #366EF4;
  background-color: #f0f8ff;
}
</style>
