tab展示商品，吸顶，滑动页面，tab选中对应的

image.png

image.png

image.png

• 描述
  1、点击tab,会吸顶，背景色白色，内容区域，滚动到指定位置
  2、滑动页面，tab距离顶部<10 ，会吸顶，背景色白色，tab根据滑动，选中指定tab
  3、选中已经出现在页面的，或者滑动到底部，会选中，屏幕上方区域内的内容对应的tab
• 代码

<template>
  <div class="main-container">
    <div
      ref="scrollContainer"
      class="container-box-first"
      @scroll="handleScrollChange(1)"
    >
      <div class="conent-title">
        测试数据
      </div>
      <div class="conent-subtitle">
        家乐福极乐世界发发牢骚减肥洒进房间里说减肥是减肥路上就放假啊手机辐射见风使舵副驾驶飞机上房间睡觉发神经发神经富兰克林是加夫里什加夫里什疗法介绍了减肥啦减肥的拉萨肌肤使肌肤来说防守反击啊了。
      </div>
      <!-- 吸顶头部 -->
      <div id="sticky-sidebar" class="sticky-header" ref="header">
        <div
          v-for="section in sections"
          :key="section.ref"
          @click="scrollToSection(section.ref)"
          :class="['sectionstab', section.ref === refName ? 'activeTabs' : '']"
        >
          {{ section.name }}
        </div>
      </div>

      <!-- 内容区域 -->
      <section
        v-for="section in sections"
        :key="section.ref"
        :ref="section.ref"
        class="content-section"
      >
        <div class="sections-item-title">
          <img :src="section.icon" alt="" />
          <div>{{ section.name }}</div>
        </div>
        <div class="panels">
          <div
            v-for="(each, index) in section.list"
            :key="index"
            class="section-item"
            @click="goRoute"
          >
            <div class="section-left">
              <img :src="each.fileUrl" alt="" />
            </div>
            <div class="section-right">
              <div>{{ each.agentName }}</div>
              <div>{{ each.agentDesc }}</div>
            </div>
          </div>
        </div>
      </section>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      list: {},
      liuUrl: process.env.VUE_APP_BASE_API,
      scrollTops: 0,
      refName: "section1",
      isProgrammaticScroll: false,
      sections: [
        {
          name: "测试1",
          ref: "zswd",
          icon: require("@/assets/images/nenglizonglan/zswd.png"),
          list: [
            {
              agentName: "cesji",
              agentDesc: "sjfslf",
              fileUrl: "@/assets/images/nenglizonglan/wdzhanshi.png",
            },
            {
              agentName: "cesji",
              agentDesc: "sjfslf",
              fileUrl: "@/assets/images/nenglizonglan/wdzhanshi.png",
            },
            {
              agentName: "cesji",
              agentDesc: "sjfslf",
              fileUrl: "@/assets/images/nenglizonglan/wdzhanshi.png",
            },
            {
              agentName: "cesji",
              agentDesc: "sjfslf",
              fileUrl: "@/assets/images/nenglizonglan/wdzhanshi.png",
            },
            {
              agentName: "cesji",
              agentDesc: "sjfslf",
              fileUrl: "@/assets/images/nenglizonglan/wdzhanshi.png",
            },
            {
              agentName: "cesji",
              agentDesc: "sjfslf",
              fileUrl: "@/assets/images/nenglizonglan/wdzhanshi.png",
            },
            {
              agentName: "cesji",
              agentDesc: "sjfslf",
              fileUrl: "@/assets/images/nenglizonglan/wdzhanshi.png",
            },
            {
              agentName: "cesji",
              agentDesc: "sjfslf",
              fileUrl: "@/assets/images/nenglizonglan/wdzhanshi.png",
            },
          ],
        },
        {
          name: "测试2",
          ref: "zsw2",
          icon: require("@/assets/images/nenglizonglan/zswd.png"),
          list: [
            {
              agentName: "cesji",
              agentDesc: "sjfslf",
              fileUrl: "@/assets/images/nenglizonglan/wdzhanshi.png",
            },
            {
              agentName: "cesji",
              agentDesc: "sjfslf",
              fileUrl: "@/assets/images/nenglizonglan/wdzhanshi.png",
            },
            {
              agentName: "cesji",
              agentDesc: "sjfslf",
              fileUrl: "@/assets/images/nenglizonglan/wdzhanshi.png",
            },
            {
              agentName: "cesji",
              agentDesc: "sjfslf",
              fileUrl: "@/assets/images/nenglizonglan/wdzhanshi.png",
            },
            {
              agentName: "cesji",
              agentDesc: "sjfslf",
              fileUrl: "@/assets/images/nenglizonglan/wdzhanshi.png",
            },
            {
              agentName: "cesji",
              agentDesc: "sjfslf",
              fileUrl: "@/assets/images/nenglizonglan/wdzhanshi.png",
            },
            {
              agentName: "cesji",
              agentDesc: "sjfslf",
              fileUrl: "@/assets/images/nenglizonglan/wdzhanshi.png",
            },
            {
              agentName: "cesji",
              agentDesc: "sjfslf",
              fileUrl: "@/assets/images/nenglizonglan/wdzhanshi.png",
            },
          ],
        },
        {
          name: "测试3",
          ref: "zswd3",
          icon: require("@/assets/images/nenglizonglan/zswd.png"),
          list: [
            {
              agentName: "cesji",
              agentDesc: "sjfslf",
              fileUrl: "@/assets/images/nenglizonglan/wdzhanshi.png",
            },
            {
              agentName: "cesji",
              agentDesc: "sjfslf",
              fileUrl: "@/assets/images/nenglizonglan/wdzhanshi.png",
            },
            {
              agentName: "cesji",
              agentDesc: "sjfslf",
              fileUrl: "@/assets/images/nenglizonglan/wdzhanshi.png",
            },
            {
              agentName: "cesji",
              agentDesc: "sjfslf",
              fileUrl: "@/assets/images/nenglizonglan/wdzhanshi.png",
            },
            {
              agentName: "cesji",
              agentDesc: "sjfslf",
              fileUrl: "@/assets/images/nenglizonglan/wdzhanshi.png",
            },
            {
              agentName: "cesji",
              agentDesc: "sjfslf",
              fileUrl: "@/assets/images/nenglizonglan/wdzhanshi.png",
            },
            {
              agentName: "cesji",
              agentDesc: "sjfslf",
              fileUrl: "@/assets/images/nenglizonglan/wdzhanshi.png",
            },
            {
              agentName: "cesji",
              agentDesc: "sjfslf",
              fileUrl: "@/assets/images/nenglizonglan/wdzhanshi.png",
            },
          ],
        },
        {
          name: "测试4",
          ref: "zswd4",
          icon: require("@/assets/images/nenglizonglan/zswd.png"),
          list: [
            {
              agentName: "cesji",
              agentDesc: "sjfslf",
              fileUrl: "@/assets/images/nenglizonglan/wdzhanshi.png",
            },
            {
              agentName: "cesji",
              agentDesc: "sjfslf",
              fileUrl: "@/assets/images/nenglizonglan/wdzhanshi.png",
            },
            {
              agentName: "cesji",
              agentDesc: "sjfslf",
              fileUrl: "@/assets/images/nenglizonglan/wdzhanshi.png",
            },
            {
              agentName: "cesji",
              agentDesc: "sjfslf",
              fileUrl: "@/assets/images/nenglizonglan/wdzhanshi.png",
            },
            {
              agentName: "cesji",
              agentDesc: "sjfslf",
              fileUrl: "@/assets/images/nenglizonglan/wdzhanshi.png",
            },
            {
              agentName: "cesji",
              agentDesc: "sjfslf",
              fileUrl: "@/assets/images/nenglizonglan/wdzhanshi.png",
            },
            {
              agentName: "cesji",
              agentDesc: "sjfslf",
              fileUrl: "@/assets/images/nenglizonglan/wdzhanshi.png",
            },
            {
              agentName: "cesji",
              agentDesc: "sjfslf",
              fileUrl: "@/assets/images/nenglizonglan/wdzhanshi.png",
            },
          ],
        },
        {
          name: "测试5",
          ref: "zswd5",
          icon: require("@/assets/images/nenglizonglan/zswd.png"),
          list: [
            {
              agentName: "cesji",
              agentDesc: "sjfslf",
              fileUrl: "@/assets/images/nenglizonglan/wdzhanshi.png",
            },
            {
              agentName: "cesji",
              agentDesc: "sjfslf",
              fileUrl: "@/assets/images/nenglizonglan/wdzhanshi.png",
            },
            {
              agentName: "cesji",
              agentDesc: "sjfslf",
              fileUrl: "@/assets/images/nenglizonglan/wdzhanshi.png",
            },
            {
              agentName: "cesji",
              agentDesc: "sjfslf",
              fileUrl: "@/assets/images/nenglizonglan/wdzhanshi.png",
            },
            {
              agentName: "cesji",
              agentDesc: "sjfslf",
              fileUrl: "@/assets/images/nenglizonglan/wdzhanshi.png",
            },
            {
              agentName: "cesji",
              agentDesc: "sjfslf",
              fileUrl: "@/assets/images/nenglizonglan/wdzhanshi.png",
            },
            {
              agentName: "cesji",
              agentDesc: "sjfslf",
              fileUrl: "@/assets/images/nenglizonglan/wdzhanshi.png",
            },
            {
              agentName: "cesji",
              agentDesc: "sjfslf",
              fileUrl: "@/assets/images/nenglizonglan/wdzhanshi.png",
            },
            {
              agentName: "cesji",
              agentDesc: "sjfslf",
              fileUrl: "@/assets/images/nenglizonglan/wdzhanshi.png",
            },
            {
              agentName: "cesji",
              agentDesc: "sjfslf",
              fileUrl: "@/assets/images/nenglizonglan/wdzhanshi.png",
            },
          ],
        },
      ],
    };
  },
  mounted() {
  },
  beforeDestroy() {
  },
  methods: {
    goWangzhan() {
    },
    getlist() {
    },
    goRoute() {
    },
    handleScrollChange(sign) {
      var sidebar = document.getElementById("sticky-sidebar");
        if (this.$refs.header.getBoundingClientRect().top <= 10) {
          sidebar.style.backgroundColor = "white";
        } else {
          sidebar.style.backgroundColor = "transparent";
        }
        console.log(
          this.$refs.header.getBoundingClientRect().top,
          "headerHeight"
        );
      console.log('nonono')
      if (this.isProgrammaticScroll) {
        let t2 = 0;
        let nums = 0;
        let num2 = 0;
        if (
          this.$refs.scrollContainer &&
          this.$refs.scrollContainer.scrollTop
        ) {
          nums =
            this.$refs.scrollContainer.scrollHeight -
            this.$refs.scrollContainer.clientHeight;
          t2 = this.$refs.scrollContainer.scrollTop;
        }
        if (this.scrollTops <= nums && t2 === this.scrollTops) {
          this.isProgrammaticScroll = false; // 重置标志
        } else if (this.scrollTops > nums) {
          num2 = this.scrollTops - nums;
          console.log(num2, t2, this.scrollTops, "ceshiwa");
          if (
            t2 + num2 === this.scrollTops ||
            t2 + num2 > this.scrollTops - 1
          ) {
            this.isProgrammaticScroll = false;
            this.handleScroll();
          }
        }
      } else {
        this.handleScroll();
      }
    },
    handleScroll() {
      console.log("zoule");
      this.$nextTick(() => {
        let scrollPosition = "";
        if (
          this.$refs.scrollContainer &&
          this.$refs.scrollContainer.scrollTop
        ) {
          scrollPosition = this.$refs.scrollContainer.scrollTop;
          //this.scrollTops = scrollPosition;
        } // 获取滚动位置
        let headerHeight = 0;
        if (this.$refs.header && this.$refs.header.offsetHeight) {
          //+ 80;
          headerHeight = this.$refs.header.offsetHeight;
        }
       
        this.sections.forEach((section) => {
          if (
            this.$refs[section.ref] &&
            this.$refs[section.ref].length > 0 &&
            this.$refs[section.ref][0].offsetTop
          ) {
            let str = this.$refs[section.ref][0].offsetTop - headerHeight;
            let str2 = str + this.$refs[section.ref][0].offsetHeight;

            if (scrollPosition >= str && scrollPosition <= str2) {
              this.refName = section.ref;
              //  this.scrollToSection(section.ref)
              // 更新当前激活的导航项ID
            }
          }
        });
      });
    },
    // 滚动到指定区域
    scrollToSection(refName) {
      this.isProgrammaticScroll = true; // 设置标志
      this.refName = refName;
      // let startName = this.refName
      // this.refName  = refName;
      let that = this;
      this.$nextTick(() => {
        const el = this.$refs[refName][0];
        console.log(el, "el");
        if (!el) return;
        // 计算滚动位置（考虑吸顶头部高度）
        let headerHeight = 0;
        if (this.$refs.header && this.$refs.header.offsetHeight) {
          //+ 80;
          headerHeight = this.$refs.header.offsetHeight;
        }
        var sidebar = document.getElementById("sticky-sidebar");
        const targetY = el.offsetTop - headerHeight;
        //that.$refs.scrollContainer
        // this.handleScrollChange()

        this.scrollTops = targetY;
        console.log(
          targetY,
          el.offsetHeight,
          "aiya",
          that.$refs.scrollContainer.scrollHeight -
            that.$refs.scrollContainer.clientHeight,
          "000",
          that.$refs.scrollContainer.scrollTop
        );
        let num1 =
          that.$refs.scrollContainer.scrollHeight -
          that.$refs.scrollContainer.clientHeight;
        if (that.$refs.scrollContainer.scrollTop >= num1 && targetY > num1) {
          this.isProgrammaticScroll = false; // 设置标志
          setTimeout(() => {
            that.handleScroll();
          }, 200);
        } else {
          that.$refs.scrollContainer.scroll({
            top: targetY,
            left: 0,
            behavior: "smooth",
          });
      
        }
      });
    },

    // 检测元素是否在可视区域
    isElementInViewport(el) {
      const rect = el.getBoundingClientRect();
      return rect.top < window.innerHeight && rect.bottom > 0;
    },
  },
};
</script>

<style>
.container-box-first {
  overflow-y: auto;
  width: 100%;
  height: 100vh !important;
  background-image: url("../assets/images/nenglizonglan/wdzhanshi.png");
  background-size: 100% 100%;
  background-position: center center;
  background-repeat: no-repeat;
}
.conent-firsts {
  height: 300px;
  width: 300px;
  margin: 30px auto 0 auto;
}
.conent-firsts img {
  width: 100%;
  height: 100%;
}
.conent-title {
  width: 305px;
  height: 50px;
  font-size: 30px;
  margin: 285px auto 0 auto;
  display: flex;
  justify-content: center;
}
.conent-title img {
  margin: 285px auto 0 auto;
  width: 305px;
  height: 50px;
}
.conent-subtitle {
  text-indent: 2ch;
  width: 82%;
  margin: 40px auto 40px auto;
  font-size: 20px;
  color: #616161;
  line-height: 30px;
}
.sticky-header {
  display: flex;
  justify-content: center;
  align-items: center;
  position: sticky;
  top: 0px;
  width: 100%;
  padding: 15px;
  z-index: 100;
}

.content-section {
  padding: 0 20px 0px 20px;
  margin: 0 auto 0 auto;
  width: 80%;
  /* min-height: 400px; */
}

.panels {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.content-section .sections-item-title {
  display: flex;
  align-items: center;
  font-family: YouSheBiaoTiHei;
  font-size: 22px;
  color: #313439;
  margin-bottom: 23px;
}
.content-section .sections-item-title img {
  width: 22px;
  height: 22px;
  margin-right: 10px;
}

.section-item {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 92px;
  width: calc(100% / 3 - 27px);
  margin-right: 40.5px;
  margin-bottom: 20px;
  border-radius: 10px;
  background: #fff;
  padding: 20px 20px;
}
.panels > div:nth-child(3n) {
  margin-right: 0;
}
.section-left {
  width: 40px;
  height: 40px;
}
.section-left img {
  border-radius: 50%;
  width: 100%;
  height: 100%;
}
.section-right {
  height: 100%;
  width: calc(100% - 60px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.section-right > div:nth-child(1) {
  width: 100%;
  font-size: 18px;
  color: #000000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.section-right > div:nth-child(2) {
  width: 100%;
  font-size: 16px;
  color: #595959;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sectionstab {
  cursor: pointer;
  margin: 0 20px;
  padding-bottom: 10px;
}
.activeTabs {
  color: aquamarine;
  border-bottom: 2px solid aquamarine;
}
</style>