vue 錨點定位

vue 錨點定位

<template>
	<div class="details">
		<div class="wrapper w">
			<div class="benefit">
				<div class="benfit-left">
//這個是頁簽
					<div class="benefit-cell" ref="searchBar" :class="{'fixed': searchBarFixed}">
						<div class="benefit-cell-title tabs">
							<div class="wrapper-tab">
								<span class="tab" :class="{'active1':index==current}" v-for="(item,index) in nav" v-on:click="tabSelect(index)">{{item.text}}</span>
								<div v-if="searchBarFixed" class="insure-btn" @click="goInsured(detailsData.code)">立即投保</div>
							</div>
						</div>
					</div>
//第一部分
					<div class="benefit-cell" ref="introduce">
						<div class="benefit-cell-content">
							<!--todo：產品介紹-->
							<div class="wrapper" v-html="detailsData.content"></div>
						</div>
					</div>
//第二部分
					<div class="benefit-cell" ref="problem">
						<div class="benefit-cell-title">
							<h4>常見問題</h4>
							<a class="benefit-cell-detail" v-if="subLink.notice_more" @click="goDetails(subLink.notice_more.key,subLink.notice_more.title,detailsData.id)">{{subLink.notice_more.title}}</a>
						</div>
						<div class="benefit-cell-content">
							<!--todo：常見問題-->
							<div class="wrapper" v-html="detailsData.notice"></div>
						</div>
					</div>
//第三部分
					<div class="benefit-cell" ref="claims">
						<div class="benefit-cell-title">
							<h4>理賠說明</h4>
							<a class="benefit-cell-detail" v-if="subLink.claim_notice" @click="goDetails(subLink.claim_notice.key,subLink.claim_notice.title,detailsData.id)">{{subLink.claim_notice.title}}</a>
						</div>
						<div class="benefit-cell-content">
							<!--todo：理賠內容-->
							<el-steps :active="contentClaims.length" align-center style="margin:60px 0">
								<el-step :title="item.title" :description="item.info" v-for="(item,index) in contentClaims" :key="index"></el-step>
							</el-steps>
						</div>
						<div class="benefit-cell-content" style="min-height:600px">
						
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import urls from "@/api/urls";
	let offsetTop, problemTop, claimsTop;
	export default {
		components: {
			"bg-header": header
		},
		data() {
			return {
				detailsData: {},
				productType: '',
				defaultAvatar,
				current: 0,
				subLink: '',
				insureNotes: {},
				searchBarFixed: false,
				nav: [{
					text: '產品介紹',
					target: '#introduce'
				}, {
					text: '常見問題',
					target: '#problem'
				}, {
					text: '理賠說明',
					target: '#claims'
				}],
				code:'',
				contentClaims:[]
			}
		},
		created() {
			this.id = this.$route.query.id
			this.getInfo()
		},
		mounted() {
			window.addEventListener("scroll", this.handleScroll);//頁面加載的時候調滾動的方法
		},
		methods: {
			handleScroll() { //滾動的方法
				var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;   //這里的判斷是為了兼容各個瀏覽器
				offsetTop = this.$refs.searchBar.offsetTop;
				problemTop = this.$refs.problem.offsetTop;
				claimsTop =  this.$refs.claims.offsetTop;
				if(scrollTop > offsetTop) {
					this.searchBarFixed = true;
				} else {
					this.searchBarFixed = false;
				}
				if(scrollTop >= problemTop && scrollTop < claimsTop) {
					this.current = 1;
				} else if(scrollTop >= claimsTop) {
					this.current = 2;
				} else {
					this.current = 0;
				}
				console.log(offsetTop)
			},
			tabSelect(index) {   //tab切換的方法
				this.current = index;
				// 錨點實時切換
				let stepTop =
					this.$refs.introduce.offsetTop

				let buyTop =
					this.$refs.problem.offsetTop

				let evaluateTop =
					this.$refs.claims.offsetTop
					console.log(stepTop)
				switch(index) {
					case 0:
						if(!document.documentElement.scrollTop){    //這里的判斷是為了兼容各個瀏覽器
							document.body.scrollTop = stepTop
						}else{
							document.documentElement.scrollTop = stepTop
						}
						break
					case 1:
						if(!document.documentElement.scrollTop){
							document.body.scrollTop = buyTop
						}else{
							document.documentElement.scrollTop = buyTop
						}
						break
					case 2:
						if(!document.documentElement.scrollTop){
							document.body.scrollTop = evaluateTop
						}else{
							document.documentElement.scrollTop = evaluateTop
						}
						break
					default:
						break
				}
			},
		}
	};
</script>

<style scoped lang="less">
	@import "../../assets/css/mixins";
		.fixed {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			z-index: 10;
			background: #fff;
			box-shadow: 2px 0px 20px rgba(0, 0, 0, 0.3);
			.tabs {
				width: 1200px;
				margin:0 auto;
			}
		}
</style>