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 src="https://cdn.jsdelivr.net/npm/
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">
</script>
</head>
<body>
<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>
<div class="container">
<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 () {
clearTimeout(last)
var last = setTimeout(() => {
this.loadSroll()
}, 50)
}
},
mounted() {
window.addEventListener('scroll', this.dataScroll);
}
})
</script>
</body>
</html>
相關推薦
vue錨點定位+滾動監聽+函式節流
此功能在上篇文章上增加了個函式節流 效能上會更好些。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="vi
Vue實現錨點定位+滾動監聽
在百度上始終沒有找到自己想要的效果，然後自己就手寫了個，話不多說，直接貼程式碼。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <met
vue 錨點定位問題
在vue中用a標籤實現錨點定位時，如果路由模式使用的是hash模式的話，如果有相應的路由的話會進行路由跳轉。可以通過自定義方法來實現錨點定位。 <a href="javascript:;" @c
結合錨點利用滾動條監聽跳轉
關於 家居 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
vue事件監聽函式on中的this指標域
使用eventBus在兩個元件A，B之間通訊： //定義全域性eventBus用於事件傳遞 var bus = new Vue(); //A元件 var A = Vue.component({ ... data:{ dataA:1, }, //在鉤子函式中將監聽_even
Vue元件通訊之二：事件監聽函式$emit/$on/$off
在vue2.x版本中自定義時間都需要通過$emit/$on/$off函式來進行觸發、監聽和取消監聽。 如果瞭解過JavaScript的設計模式-------觀察者模式，一定知道dispatchEvent和addEventListener這兩個方法。Vue元件中也有與之類似的模式，子元件用$emi
vue給當前頁面加滾動監聽怎麼樣不影響其他頁面
最近利用vue寫了一個網站，在網站某一個頁面滾動到某一個地方後執行某一動化，所以要獲取拿一個div到頂部的距離，所以我在頁面載入的時候給window加了一個滾動的監聽 mounted(){ window.addEventListener('scroll', this.handleScro
在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="
vue中，實現錨點定位及跳轉（url不發生變化）
直接上程式碼<div class="footer" @click="returnTop"> methods:{ returnTop:function(){ document.querySelector("#header").scrollIntoVi
vue中給window新增滾動監聽無效的解決方案
頁面中有這麼一個需求，當頁面滾動到一定高度之後，頁面中的某些元素進行吸頂，固定到頂部位置，或者是滾動到一定程度進行更新資料的操作。 我相信不少網友查閱過類似的資料，網友給出的解決方案，很多都是在mounted中新增 window.addEventList
Vue專案中實現錨點定位
背景 今天在開發限時練-提分加專案的時候，有一個需要錨點定位的需求，而在Vue專案中，使用傳統的在a標籤的href屬性中寫id的方法無效，會導致瀏覽器的地址改變從而跳轉到其他頁面。 解決
滾動監聽
位置 position 用法 href data 也會 lis bar target 滾動監聽插件是用來根據滾動條所處的位置來自動更新導航項的。如下所示，滾動導航條下面的區域並關註導航項的變化。下拉菜單中的條目也會自動高亮顯示。 用法 依賴 Bootstrap 的導航組件
html中設置錨點定位的幾種常見方法
element 針對 htm com script int nbsp onclick .get 1,使用id定位： <a href="#1F" name="1F">錨點1</a> <div name="1F"> <p>
html 錨點定位
java mod 設置 pac class 作用 code 針對 click 在html中設置錨點定位我知道的有幾種方法。在此和大家分享一下： 1、使用id定位： <a href="#1F" name="1F"&g
Jquery滾動監聽和附加導航
jquery 導航 滾動監聽初學jquery,多多指教導航思路：設定nav導航的類。設定索引值。點擊導航內容，導航的索引和內容的索引一一對應。點擊導航欄，內容滑動一段距離。監聽： 1.滑動內容文檔時，索引值變動。 2.導航對應的索引所在內容高亮。下面是代碼<!--導航-->$(doc
Bootstrap 下拉菜單和滾動監聽插件
bootstrap 下拉菜單和滾動監聽插件 一．下拉菜單 常規使用中，和組件方法一樣，代碼如下： //聲明式用法 <div class="dropdown"> <button class="btn btn-primary" data-toggle="dropdown"> 下拉菜
Bootstrap 學習筆記8 下拉菜單滾動監聽
bsp http drop htm bar 下拉 overflow inf flow 代碼部分： <nav class="navbar navbar-default"> <a href="#" class="navba