vue横向导航条滚动到顶部固定同时瞄点对应内容（copy即用）
2020-04-12 本文已影响0人
奔跑的痕迹
这里监听window 的
scroll实现一个页面滚动，导航菜单定位，内容联动的一个简单组件，结合一些案例，按需进行了整合，在此记录一下
效果图如下
预览效果
预览效果
具体实现如下
一、先创建一个NavigateTool.vue导航组件
html
<template>
<div class="searchBar navigate__bar">
<ul :class="searchBarFixed == true ? 'isFixed' :''">
<li :class="{active: navIndex===0}" @click="scrollTo(0)">区域</li>
<li :class="{active: navIndex===1}" @click="scrollTo(1)">国界</li>
<li :class="{active: navIndex===2}" @click="scrollTo(2)">宇宙</li>
<li :class="{active: navIndex===3}" @click="scrollTo(3)">银河</li>
</ul>
</div>
</template>
js
1、mounted()中 监听页面滚动
mounted() {
// 监听滚动事件
window.addEventListener('scroll', this.onScroll, false)
},
2、 destroy() 中注销监听
destroy() {
// 必须移除监听器，不然当该vue组件被销毁了，监听器还在就会出错
window.removeEventListener('scroll', this.onScroll)
},
3、data挂载当前激活导航id
data(){
return{
navIndex:0,
searchBarFixed:false,
}
},
4、methods中添加 监听页面滚动事件方法
/**
* 页面滚动事件监听
*/
onScroll() {
// 获取所有锚点元素
const navContents = document.querySelectorAll('.home__content_comp div')
console.log(navContents.length)
// 所有锚点元素的 offsetTop
const offsetTopArr = []
navContents.forEach(item => {
offsetTopArr.push(item.offsetTop)
})
// 获取当前文档流的 scrollTop
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
// 定义当前点亮的导航下标
let navIndex = 0
for (let n = 0; n < offsetTopArr.length; n++) {
// 如果 scrollTop 大于等于第n个元素的 offsetTop 则说明 n-1 的内容已经完全不可见
// 那么此时导航索引就应该是n了
if (scrollTop >=offsetTopArr[n]) {
navIndex = n+1
}
}
navIndex = navIndex >= navContents.length? navIndex-1:navIndex;
console.log(navIndex)
this.navIndex = navIndex
// 组件吸附顶部
var offsetTop = document.querySelector('.navigate__bar').offsetTop;
if (scrollTop > offsetTop) {
this.searchBarFixed = true;
} else {
this.searchBarFixed = false;
}
},
5、methods中添加导航菜单点击事件（计算页面滚动位置与组件距离顶部距离）
/**
* 跳转到指定索引的元素
* @param index
*/
scrollTo(index) {
// 获取目标的 offsetTop
// css选择器是从 1 开始计数，我们是从 0 开始，所以要 +1
// const foundEl = document.querySelector(`.home__content_comp div:nth-child(${index + 1})`);
// const elClientHeight = foundEl.clientHeight;
const targetOffsetTop = document.querySelector(`.home__content_comp div:nth-child(${index+1})`).offsetTop-40
// 获取当前 offsetTop
let scrollTop = document.documentElement.scrollTop || document.body.scrollTop
// 定义一次跳 50 个像素，数字越大跳得越快，但是会有掉帧得感觉，步子迈大了会扯到蛋
const STEP = 50
// 判断是往下滑还是往上滑
if (scrollTop > targetOffsetTop) {
// 往上滑
smoothUp()
} else {
// 往下滑
smoothDown()
}
// 定义往下滑函数
function smoothDown() {
// 如果当前 scrollTop 小于 targetOffsetTop 说明视口还没滑到指定位置
if (scrollTop < targetOffsetTop) {
// 如果和目标相差距离大于等于 STEP 就跳 STEP
// 否则直接跳到目标点，目标是为了防止跳过了。
if (targetOffsetTop - scrollTop >= STEP) {
scrollTop += STEP
} else {
scrollTop = targetOffsetTop
}
document.body.scrollTop = scrollTop
document.documentElement.scrollTop = scrollTop
// 关于 requestAnimationFrame 可以自己查一下，在这种场景下，相比 setInterval 性价比更高
requestAnimationFrame(smoothDown)
}
}
// 定义往上滑函数
function smoothUp() {
if (scrollTop > targetOffsetTop) {
if (scrollTop - targetOffsetTop >= STEP) {
scrollTop -= STEP
} else {
scrollTop = targetOffsetTop
}
document.body.scrollTop = scrollTop
document.documentElement.scrollTop = scrollTop
requestAnimationFrame(smoothUp)
}
}
}
css
<style scoped lang="scss">
.searchBar {
width: 100%;
.isFixed {
position: fixed;
width: 100%;
top: 0;
left: 0;
z-index: 999;
}
ul {
height: 40px;
line-height: 40px;
display: flex;
margin:0;
padding: 0;
li {
font-size: 0.8rem;
flex: 1;
display: flex;
justify-items: center;
justify-content: center;
align-items: center;
align-content: center;
position: relative;
background-color: #fff;
&.active {
color: #847ec3;
background-color: #e2e2e2;
&:after {
content: " ";
position: absolute;
height: 1px;
width: 30px;
bottom: 6px;
left:calc(50% - 15px);
border-top: 2px #847ec3 solid;
}
}
}
}
}
</style>
二、再建个HomeContent.vue
这个页面就比较简单了
<template>
<div>
<naigate-tool></naigate-tool>
<!-- 内容区域 -->
<div class="home__content_comp">
<div>
This is first page.
</div>
<div>
This is second page.
</div>
<div>
This is third page.
</div>
<div>
This is fourth page.
</div>
</div>
</div>
</template>
<script type="text/ecmascript-6">
import NaigateTool from './NavigateTool';
export default {
name:'HomeContent',
components:{
NaigateTool
}
}
</script>
<style scoped>
/* 内容区的样式 */
.home__content_comp {
background-color: white;
width: 100%;
}
.home__content_comp div {
width: 100%;
height: 600px;
font-size: 26px;
background-color: #7ec384;
}
.home__content_comp div:nth-child(2n) {
background-color: #847ec3;
}
</style>
参考案例：
