Vue實現錨點定位+滾動監聽
在百度上始終沒有找到自己想要的效果，然後自己就手寫了個，話不多說，直接貼程式碼。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title
</script></head>
<body> <style> * { padding: 0; margin: 0; }
.nav1
.current { color: #fff; background: red; } </style> <
<div class="wrapper"> <div class="section" style="height:500px;width:100%" v-for="(item, index) in list" :key="index" :style="{'height':index==0?'1000px':'500px'}"> <div style="width:100%;height:100%;font-size:30px;text-align:center;font-weight:bold;color:#fff;" :style="{'background':item.backgroundcolor}">{{item.name}}</div> </div> </div> <div id="nac" style="height:500px;"></div> <nav style="position:fixed;right:30px;top:300px;"> <a class="nav1" v-for="(item, index) in navList" :key="index" @click="jump(index)" :class="index==0?'current':''">{{item}}</a> </nav> </div> <script> new Vue({ el: ".container", 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></body>
</html>
相關推薦
Vue實現錨點定位+滾動監聽
在百度上始終沒有找到自己想要的效果，然後自己就手寫了個，話不多說，直接貼程式碼。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <met
vue錨點定位+滾動監聽+函式節流
此功能在上篇文章上增加了個函式節流 效能上會更好些。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="vi
vue中，實現錨點定位及跳轉（url不發生變化）
直接上程式碼<div class="footer" @click="returnTop"> methods:{ returnTop:function(){ document.querySelector("#header").scrollIntoVi
Vue專案中實現錨點定位
背景 今天在開發限時練-提分加專案的時候，有一個需要錨點定位的需求，而在Vue專案中，使用傳統的在a標籤的href屬性中寫id的方法無效，會導致瀏覽器的地址改變從而跳轉到其他頁面。 解決
Android tabLayout+recyclerView實現錨點定位
ons boolean 根據 https set ret 需要 tco int 原文鏈接：https://mp.weixin.qq.com/s/L3o2i3WTmg1ScXEYDS8YCg 在上一篇文章 Android 實現錨點定位中，我們介紹了tablayout+sc
vue給當前頁面加滾動監聽怎麼樣不影響其他頁面
最近利用vue寫了一個網站，在網站某一個頁面滾動到某一個地方後執行某一動化，所以要獲取拿一個div到頂部的距離，所以我在頁面載入的時候給window加了一個滾動的監聽 mounted(){ window.addEventListener('scroll', this.handleScro
CSS進階（11）—— overflow屬性詳解，利用CSS實現錨點定位
本章延續上一章BFC的內容深入探索BFC的最佳結界——overflow在其本職工作上的表現。 1.overflow的裁剪界線——border-box overflow屬性用於指定塊容器元素的內容溢位時的表現方式——滾動，裁剪，自適應。“BFC
vue中給window新增滾動監聽無效的解決方案
頁面中有這麼一個需求，當頁面滾動到一定高度之後，頁面中的某些元素進行吸頂，固定到頂部位置，或者是滾動到一定程度進行更新資料的操作。 我相信不少網友查閱過類似的資料，網友給出的解決方案，很多都是在mounted中新增 window.addEventList
bootstrap 3 navrbar實現置頂並滾動監聽
<style> .menu { width:100%; z-index:1; } .menuFixed { position:fixed; top:0; left:0; } #m
結合錨點利用滾動條監聽跳轉
關於 家居 col eat span tom odi ack 分享 每一個錨點都相當於一個完整的模塊，正好占滿一個屏幕，滾動可以直接跳轉錨點， <body> <!--頭部開始--> <div id="header">
滾動監聽（上面導航下面錨點）
就是點選導航一個欄目，會顯示對應的內容 基本使用方法 ** 讓欄目有選中的效果？ ** data-spy=“scroll” style=“position: relative” ** 當導航欄和內容框的距離達到多少時，導航欄選中效果會發生切換？ **
關於vue中滾動監聽失效問題
top scrolltop ont bsp .cn vue 資料 index document 在vue項目中, 監聽window滾動失效;並且document.body.scrollTop一直是0的情況! 查找了許多資料;並沒有找到合理的解決方案; 最中發現,在in
JQuery簡單實現錨點連結的平滑滾動
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style>
導航的滾動監聽實現步驟
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &nb
scrollIntoView()實現簡單的錨點定位
綜述 錨點定位是一個再熟悉不過的操作了，通常會用a標籤href=#XX去實現，不過這樣做，有一個問題，就是頁面會有重新整理感，而且位址列會有變化，F5重新整理，則#XXX還是顯示在位址列裡，這樣如果要進一步進行有關位址列url的操作，就不得不再做些判斷，所以尋找一些新的方法
在Vue 單頁面中做錨點定位
公司專案中，有個儲存表單的頁面有很多必填欄位校驗。而現在增加需求，點選儲存的時候，自動跳轉到必填的地方。擼起袖子幹起來 將要跳轉的HTML頁面 加個ref <template> <div class="app-container calend
如何對vue中的元件進行點選事件監聽
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-default/index.css"> </head> <body> <div id="
Android 對ScrollView滾動監聽，實現美團 大眾點評的購買懸浮效果
隨著移動網際網路的快速發展，它已經和我們的生活息息相關了，在公交地鐵裡面都能看到很多人的人低頭看著自己的手機螢幕，從此“低頭族”一詞就產生了，作為一名移動行業的開發人員，我自己也是一名“低頭族”，上下班時間在公交地鐵上看看新聞來打發下時間，有時候也會看看那些受歡迎的App的一些
css實現返回首部和滾動監聽的原理
在頁面中實現返回首部 原理將<a>連線到頂部的其中一個標籤 當點選這個連結時 可以實現返回頂部 js 在裡面實現返回圖示的出現 注意的是實現的邏輯為 考察滾動條距離頂部的距離 方法
vue 如何實現錨點
最近遇到一個需求，進入頁面，滾動到錨點位置。如何實現？在router檔案下的index.js中配置：1.配置2.路由跳轉3.設定錨點最後，我遇到了一個問題，你npm run build 生成專案後測試，第一次進入成功，然後在頁面中操作一波，重新整理，網頁開啟失敗，顯示