在項目需求中需要實現(xiàn)一個滾軸聯(lián)動錨點的功能
創(chuàng)新互聯(lián)公司主營八公山網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,重慶APP開發(fā),八公山h5小程序設(shè)計搭建,八公山網(wǎng)站營銷推廣歡迎八公山等地區(qū)企業(yè)咨詢
效果圖如下:
功能代碼demo如下:
<template> <div class="container"> <div class="wrapper"> <div class="section" v-for="(item, index) in list" :key="index" :> <div :>{{item.name}}</div> </div> </div> <div id="nac" ></div> <nav > <a class="nav1" v-for="(item, index) in navList" :key="index" @click="jump(index)" :class="index==0?'current':''">{{item}}</a> </nav> </div> </template> <script> export default { data(){ return { scroll: '', list: [{ name: "第一條", backgroundcolor: "#90B2A3" }, { name: "第二條", backgroundcolor: "#A593B2" }, { name: "第三條", backgroundcolor: "#A7B293" }, { name: "第四條", backgroundcolor: "#0F2798" }, { name: "第五條", backgroundcolor: "#0A464D" }], navList: [1, 2, 3, 4, 5] } }, methods: { dataScroll: function () { this.scroll = document.documentElement.scrollTop || document.body.scrollTop; }, jump(index) { let jump = document.getElementsByClassName('section'); // 獲取需要滾動的距離 let total = jump[index].offsetTop; // Chrome document.body.scrollTop = total; // Firefox document.documentElement.scrollTop = total; // Safari window.pageYOffset = total; // $('html, body').animate({ // 'scrollTop': total // }, 400); }, loadSroll: function () { var self = this; var $navs = $(".nav1"); var sections = document.getElementsByClassName('section'); for (var i = sections.length - 1; i >= 0; i--) { if (self.scroll >= sections[i].offsetTop - 100) { $navs.eq(i).addClass("current").siblings().removeClass("current") break; } } } }, watch: { scroll: function () { this.loadSroll() } }, mounted() { window.addEventListener('scroll', this.dataScroll); } } </script> <style> * { padding: 0; margin: 0; } .nav1 { display: block; width: 40px; height: 40px; text-align: center; line-height: 40px; background: #eee; margin: 10px 0; } .current { color: #fff; background: red; } </style>
以上這篇Vue監(jiān)聽滾動實現(xiàn)錨點定位(雙向)示例就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持創(chuàng)新互聯(lián)。
網(wǎng)頁名稱:Vue監(jiān)聽滾動實現(xiàn)錨點定位(雙向)示例
本文路徑:http://bm7419.com/article18/pcejgp.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供品牌網(wǎng)站建設(shè)、云服務(wù)器、網(wǎng)站營銷、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站改版、服務(wù)器托管
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)