vue单页应用 h5页面-吸顶效果-锚点定位-滚动到相应的位置激活tab

<template>
  <div>
    <div class="jiancha-header" id="boxFixed" :class="{'is_fixed' : isFixed}">
      <el-row class="jiancha-header-top">
        <i class="el-icon-arrow-left jiancha-header-i" @click="$router.go(-1);"></i>
        <span class="jiancha-header-span">检查阅读</span>
        <el-input v-model="input" prefix-icon="el-icon-search" placeholder="搜索检查项目"></el-input>
      </el-row>

      <div class="jiancha-header-title">
        <div class="jiancha-header-title">
          <div
            v-for="(item,key) in titleArr"
            :key="key"
            class="jiancha-header-title-div"
            @click="goAnchor(key)"
          >
            <a
              href="javascript:void(0)"
              :class="key === titleId ? 'jiancha-header-title-div-show' : ''"
            >{{item.name}}</a>
            <div
              style="width:20px;height:2px;background: #00A0E9;margin:0 auto;border-radius: 20px;"
              v-show="key === titleId"
            ></div>
          </div>
        </div>
      </div>
    </div>

    <div class="jiancha-content">
      <div class="jiancha-content-div" v-for="(item,key) in contentArr" :key="key" :id="'anchor'+key">
        <div class="jiancha-content-div-top">
          <div class="jiancha-content-div-top-left"></div>
          <div class="jiancha-content-div-top-right">{{item.name}}</div>
        </div>
        <div class="jiancha-content-div-content">
          <div
            class="jiancha-content-div-content-div"
            v-for="(item2,key2) in item.content"
            :key="key2"
            :id="item2.id"
          >
            <div class="jiancha-content-div-content-div-span">{{item2.title}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import "../../assets/css/jiancha/jiancha.css";
import { getJianChaMsg, getJianChaDetailMsg } from "@/api/jiancha";
export default {
  data() {
    return {
      input: "",
      titleArr: [],
      contentArr: [],
      titleId: 0,
      isFixed: false,
      offsetTopA: 0
    };
  },
  created() {
    this.initMsg();
  },
  mounted() {
    window.addEventListener("scroll", this.initHeight);
    this.$nextTick(() => {
      this.offsetTopA = document.querySelector("#boxFixed").offsetTop;
    });
  },
  methods: {
    goAnchor(index) {
      this.titleId = index;
      var anchor = this.$el.querySelector("#anchor" + index);
      document.body.scrollTop = anchor.offsetTop - 130;
      document.documentElement.scrollTop = anchor.offsetTop - 130;
    },
    checkTitle(val) {
      console.log(val);
      this.titleId = val;
    },
    initHeight(e) {
      var scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      this.isFixed = scrollTop > this.offsetTopA ? true : false;
      let scrollItems = document.querySelectorAll('.jiancha-content-div')
      for (let i = scrollItems.length - 1; i >= 0; i--) {
        // 判断滚动条滚动距离是否大于当前滚动项可滚动距离
        let judge = scrollTop >= scrollItems[i].offsetTop - scrollItems[0].offsetTop - 130;
        if (judge) {
          this.titleId = i
          break
        }
      }
//       var anchorOffset0 = this.$el.querySelector('#anchor0').offsetTop-100
// 　　  var anchorOffset1 = this.$el.querySelector('#anchor1').offsetTop-100
//      var anchorOffset2 = this.$el.querySelector('#anchor2').offsetTop-100
// 　　  if(scrollTop>anchorOffset0&&scrollTop<anchorOffset1){
// 　　　　this.seeThis = 0
// 　　  }
// 　　  if(scrollTop>anchorOffset1&&scrollTop<anchorOffset2){
// 　　　　this.seeThis = 1
// 　　  }
// 　　  if(scrollTop>anchorOffset2){
// 　　　　this.seeThis = 2
// 　　  }
    },
    initMsg() {
      getJianChaMsg()
        .then(res => {
          console.log(res);
          this.titleArr = res.data.data.info.map(item => {
            return {
              id: item.id,
              name: item.name
            };
          });
          this.contentArr = res.data.data.info;
          console.log(this.contentArr);
        })
        .catch(err => {
          console.log(err);
        });
    }
  },
  destroyed() {
    window.removeEventListener("scroll", this.handleScroll);
  }
};
</script>

<style>
</style>

vue代码

参考网站实现功能：https://www.yisu.com/zixun/603790.html

参考网站实现功能：https://blog.csdn.net/qq493820798/article/details/106234801

动画效果：

 

 

<template>   <div>     <div class="jiancha-header" id="boxFixed" :class="{'is_fixed' : isFixed}">       <el-row class="jiancha-header-top">         <i class="el-icon-arrow-left jiancha-header-i" @click="$router.go(-1);"></i>         <span class="jiancha-header-span">检查阅读</span>         <el-input v-model="input" prefix-icon="el-icon-search" placeholder="搜索检查项目"></el-input>       </el-row>
      <div class="jiancha-header-title">         <div class="jiancha-header-title">           <div             v-for="(item,key) in titleArr"             :key="key"             class="jiancha-header-title-div"             @click="goAnchor(key)"           >             <a               href="javascript:void(0)"               :class="key === titleId ? 'jiancha-header-title-div-show' : ''"             >{{item.name}}</a>             <div               style="width:20px;height:2px;background: #00A0E9;margin:0 auto;border-radius: 20px;"               v-show="key === titleId"             ></div>           </div>         </div>       </div>     </div>
    <div class="jiancha-content">       <div class="jiancha-content-div" v-for="(item,key) in contentArr" :key="key" :id="'anchor'+key">         <div class="jiancha-content-div-top">           <div class="jiancha-content-div-top-left"></div>           <div class="jiancha-content-div-top-right">{{item.name}}</div>         </div>         <div class="jiancha-content-div-content">           <div             class="jiancha-content-div-content-div"             v-for="(item2,key2) in item.content"             :key="key2"             :id="item2.id"           >             <div class="jiancha-content-div-content-div-span">{{item2.title}}</div>           </div>         </div>       </div>     </div>   </div> </template>
<script> import "../../assets/css/jiancha/jiancha.css"; import { getJianChaMsg, getJianChaDetailMsg } from "@/api/jiancha"; export default {   data() {     return {       input: "",       titleArr: [],       contentArr: [],       titleId: 0,       isFixed: false,       offsetTopA: 0     };   },   created() {     this.initMsg();   },   mounted() {     window.addEventListener("scroll", this.initHeight);     this.$nextTick(() => {       this.offsetTopA = document.querySelector("#boxFixed").offsetTop;     });   },   methods: {     goAnchor(index) {       this.titleId = index;       var anchor = this.$el.querySelector("#anchor" + index);       document.body.scrollTop = anchor.offsetTop - 130;       document.documentElement.scrollTop = anchor.offsetTop - 130;     },     checkTitle(val) {       console.log(val);       this.titleId = val;     },     initHeight(e) {       var scrollTop =         window.pageYOffset ||         document.documentElement.scrollTop ||         document.body.scrollTop;       this.isFixed = scrollTop > this.offsetTopA ? true : false;       let scrollItems = document.querySelectorAll('.jiancha-content-div')       for (let i = scrollItems.length - 1; i >= 0; i--) {         // 判断滚动条滚动距离是否大于当前滚动项可滚动距离         let judge = scrollTop >= scrollItems[i].offsetTop - scrollItems[0].offsetTop - 130;         if (judge) {           this.titleId = i           break         }       } //       var anchorOffset0 = this.$el.querySelector('#anchor0').offsetTop-100 // 　　  var anchorOffset1 = this.$el.querySelector('#anchor1').offsetTop-100 //      var anchorOffset2 = this.$el.querySelector('#anchor2').offsetTop-100 // 　　  if(scrollTop>anchorOffset0&&scrollTop<anchorOffset1){ // 　　　　this.seeThis = 0 // 　　  } // 　　  if(scrollTop>anchorOffset1&&scrollTop<anchorOffset2){ // 　　　　this.seeThis = 1 // 　　  } // 　　  if(scrollTop>anchorOffset2){ // 　　　　this.seeThis = 2 // 　　  }     },     initMsg() {       getJianChaMsg()         .then(res => {           console.log(res);           this.titleArr = res.data.data.info.map(item => {             return {               id: item.id,               name: item.name             };           });           this.contentArr = res.data.data.info;           console.log(this.contentArr);         })         .catch(err => {           console.log(err);         });     }   },   destroyed() {     window.removeEventListener("scroll", this.handleScroll);   } }; </script>
<style> </style>

标签：vue,querySelector,单页,item,tab,offsetTop,var,scrollTop,document
来源： https://www.cnblogs.com/huchong-bk/p/15188113.html