溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了vue滑動吸頂及錨點定位的用法，內容清晰明了，對此有興趣的小伙伴可以學習一下，相信大家閱讀完之后會有幫助。
Vue項目中需要實現滑動吸頂以及錨點定位功能。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)滑動吸頂:
監聽scroll事件，獲取頁面的滾動距離，一旦滾動距離大于目標值，實現滑動吸頂功能。
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; // 設置fixed定位
}
}
public destroyed() {
window.removeEventListener('scroll', this.handleScroll);
}（2）錨點定位。點擊tab，設置頁面滾動距離。
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;
}
}看完上述內容，是不是對vue滑動吸頂及錨點定位的用法有進一步的了解，如果還想學習更多內容，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
