快捷導(dǎo)航

vue滑動吸頂及錨點(diǎn)定位的示例代碼

更新時間：2020年05月10日 09:41:25 作者：因?yàn)橛心鉺

這篇文章主要介紹了vue滑動吸頂及錨點(diǎn)定位的示例代碼,代碼簡單易懂，非常不錯對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下

在上篇文章給大家介紹了vue實(shí)現(xiàn)吸頂、錨點(diǎn)和滾動高亮按鈕效果感興趣的朋友可以點(diǎn)擊查看http://chabaoo.cn/article/172365.htm

今天給大家繼續(xù)分享vue滑動吸頂及錨點(diǎn)定位的代碼，具體內(nèi)容如下所示：

Vue項(xiàng)目中需要實(shí)現(xiàn)滑動吸頂以及錨點(diǎn)定位功能。template代碼如下:

<template>
<div class="main">
 <div id='menu'>
  <ul>
   <li v-for="item in tabList" @click='clickTab'></li>
  </ul>
 </div>
 <div id='div1'></div>
 <div id='div2'></div>
 <div id='div3'></div>
</div> 
</template>

(1)滑動吸頂:

監(jiān)聽scroll事件，獲取頁面的滾動距離，一旦滾動距離大于目標(biāo)值，實(shí)現(xiàn)滑動吸頂功能。

public isFixed = false;
public mounted() {
 this.menuTop = (document.getElementById('menu') as any).offsetTop;
 window.addEventListener('scroll', this.handleScroll);
 }
public handleScroll() {
 const scrollTop = document.documentElement.scrollTop || document.body.scrollTop; // 獲取滑動距離
 if (scrollTop < this.menuTop ) {
  this.isFixed = false;
 } else {
  this.isFixed = true; // 設(shè)置fixed定位
 }
 }
public destroyed() {
 window.removeEventListener('scroll', this.handleScroll);
}

（2）錨點(diǎn)定位。點(diǎn)擊tab，設(shè)置頁面滾動距離。

public clickTab(index: number) {
 this.activeIndex = index;
 this.isFixed = true;
 const menuHeight= (document.getElementById('menu') as any).offsetHeight;
 const div1= (document.getElementById('div1') as any).offsetTop;
 const div2= (document.getElementById('div2') as any).offsetTop;
 const div3= (document.getElementById('div3') as any).offsetTop;
 const div4= (document.getElementById('div4') as any).offsetTop;
 switch (index) {
  case 0: document.body.scrollTop = document.documentElement.scrollTop = div1 - menuHeight; break;
  case 1: document.body.scrollTop = document.documentElement.scrollTop = div2 - menuHeight; break;
  case 2: document.body.scrollTop = document.documentElement.scrollTop = div3 - menuHeight; break;
  case 3: document.body.scrollTop = document.documentElement.scrollTop = div4 - menuHeight; break;
  default: document.body.scrollTop = document.documentElement.scrollTop = div1- menuHeight;
 }
 }

總結(jié)

到此這篇關(guān)于vue滑動吸頂及錨點(diǎn)定位的示例代碼的文章就介紹到這了,更多相關(guān)vue 滑動吸頂錨點(diǎn)定位內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: