需要使用vue做一個專題頁面。滾動頁面指定區(qū)域?qū)Ш礁吡痢?/p>
成都創(chuàng)新互聯(lián)是一家網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計(jì)，提供網(wǎng)頁設(shè)計(jì)，網(wǎng)站設(shè)計(jì)，網(wǎng)站制作，建網(wǎng)站，按需求定制設(shè)計(jì)，網(wǎng)站開發(fā)公司，自2013年創(chuàng)立以來是互聯(lián)行業(yè)建設(shè)者，服務(wù)者。以提升客戶品牌價(jià)值為核心業(yè)務(wù)，全程參與項(xiàng)目的網(wǎng)站策劃設(shè)計(jì)制作，前端開發(fā)，后臺程序制作以及后期項(xiàng)目運(yùn)營并提出專業(yè)建議和思路。
監(jiān)聽滾動頁面事件，對比當(dāng)前頁面的位置與元素的位置，如果當(dāng)前滾動的區(qū)域位置大于元素的位置，導(dǎo)航添加class，其他去掉class進(jìn)行樣式切換。
我使用的方法是在定位元素上添加id，在導(dǎo)航添加data-id屬性，監(jiān)聽滾動事件，如果當(dāng)前滾動區(qū)域大于定位元素區(qū)域，將元素的id賦值給變量，然后與導(dǎo)航的data-id進(jìn)行匹配，切換class。
html結(jié)構(gòu)
main.vue
navigation.vue
javascript
重慶分公司
重慶分公司
export default {
name: "Navigation",
data() {
return {
navList: [
{ name: "競猜大廳", id: "quizhall" },
{ name: "競猜記錄", id: "quizrecord" },
{ name: "歷史賽事", id: "quizHistory" },
{ name: "我的競猜", id: "quizMine" },
{ name: "排行榜", id: "quizRank" },
{ name: "玩法", id: "quizRule" }
],
curindex: 0
};
},
mounted() {
this.initScroll();
},
methods: {
initScroll() {
window.addEventListener('scroll', function() {
// 封裝類名函數(shù)集：判斷、移除、增加、獲取（簡單粗暴版）；
function removeClass(obj, cls) {
if (obj.className == cls) {
obj.className = "";
}
}
function addClass(obj, cls) {
if (obj.className != cls) {
obj.className = cls;
}
}
let pos = document.documentElement.scrollTop;
if (pos > 300) {
document.querySelector('.nav-container').style.display = 'block';
} else {
document.querySelector('.nav-container').style.display = 'none';
}
var menus = document.getElementById("js-nav").getElementsByTagName("li");
var items = document.getElementById("js-content").querySelectorAll(".item");
var currentId = "";
for (var i = 0; i < items.length; i++) {
var _item = items[i];
var _itemTop = _item.offsetTop;
if (pos > _itemTop - 200) {
currentId = _item.id;
} else {
break;
}
}
if (currentId) {
for (var j = 0; j < menus.length; j++) {
var _menu = menus[j];
// href屬性獲取的是整個link，需以#為界截除獲取最后一個元素；
var _href = _menu.getAttribute('data-id');
if (_href != currentId) {
removeClass(_menu, "cur");
} else {
addClass(_menu, "cur");
}
}
}
})
}
}
};以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
