<template>
<div class="main" >
<div class="Navigation">
<!-- 导航 -->
<div class="Navigationtitle">
<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleOpen">
<el-menu-item index="1" @click="jump(0)">处理中心</el-menu-item>
<el-menu-item index="2" @click="jump(1)">我的工作台</el-menu-item>
<el-menu-item index="3" @click="jump(2)">消息中心</el-menu-item>
<el-menu-item index="4" @click="jump(3)">订单管理</a></el-menu-item>
</el-menu>
</div>
<!-- 内容 -->
<div class="content" @scroll="onScroll">
<div class="dw" id="aaa">1</div>
<div class="dw" id="aaa">2</div>
<div class="dw" id="aaa">3</div>
<div class="dw" id="aaa">4</div>
</div>
</div>
<!-- 右下角导航 -->
<div class="lowerRight">
<span :class="xzcd === '1' ? 'typefacexz' : 'typeface'" @click="jump(0)"><!-- <i class="el-icon-right" v-show="xzcd === '1'"></i> -->处理中心</span>
<span :class="xzcd === '2' ? 'typefacexz' : 'typeface'" @click="jump(1)">我的工作台</span>
<!-- <span :class="xzcd === '2-1' ? 'secondxz' : 'second'" @click="handleSelect('2','2-1')">选项1</span>
<span :class="xzcd === '2-2' ? 'secondxz' : 'second'" @click="handleSelect('2','2-2')">选项2</span>
<span :class="xzcd === '2-3' ? 'secondxz' : 'second'" @click="handleSelect('2','2-3')">选项3</span> -->
<span :class="xzcd === '3' ? 'typefacexz' : 'typeface'" @click="jump(2)">消息中心</span>
<span :class="xzcd === '4' ? 'typefacexz' : 'typeface'" @click="jump(3)">订单管理</span>
</div>
</div>
</template>
<script>
export default {
data() {
return {
activeIndex: '1',//默认菜单
xzcd: '1'//右下角选中菜单
}
},
mounted() {
window.addEventListener("scroll", this.onScroll);
},
// 离开这个页面销毁滚动条事件,不然会给每一个页面都触发
beforeDestroy() {
window.removeEventListener("scroll", this.onScroll);
},
methods: {
//点击导航描点
jump(index) {
var items = document.querySelectorAll("#aaa");
for (var i = 0; i < items.length; i++) {
if (index === i) {
items[i].scrollIntoView({
block: "start",//默认跳转到顶部
behavior: "smooth"//滚动的速度
});
}
}
},
//滚动描点
onScroll(e) {
let scrollItems = document.querySelectorAll('#aaa')
for (let i = scrollItems.length - 1; i >= 0; i--) {
// 判断滚动条滚动距离是否大于当前滚动项可滚动距离
let judge = e.target.scrollTop >= scrollItems[i].offsetTop - scrollItems[0].offsetTop
if (judge) {
this.activeIndex = (i+1).toString();
this.xzcd = (i+1).toString();
break
}
}
// 滚动条触底了
// if (e.srcElement.scrollTop + e.srcElement.offsetHeight === e.srcElement.scrollHeight) {
// this.activeIndex = '4';
// this.xzcd = '4';
// }
},
handleOpen(key, keyPath) {
this.activeIndex = key;
this.xzcd = key;
},
handleSelect(key,xzcd) {
this.activeIndex = key;
this.xzcd = xzcd;
},
}
}
</script>
<style lang="less" scoped>
.main {
min-width: 1256px;
box-sizing: border-box;
position: relative;
display: flex;
.Navigation {
flex: 1;
display: flex;
flex-direction: column;
.Navigationtitle {
width: 100%;
position: fixed;
z-index: 9999;
height: 60px;
}
//响应式布局 1080
@media screen and (min-width : 1366px){
.content {
width: 80%;
margin: 0 auto;
min-width: 1366px;
}
}
//响应式布局 1080
@media screen and (max-width : 1366px){
.content {
min-width: 1256px;
margin-right: 110px;
}
}
.content {
position: fixed;
top:0px;
left: 0;
right:0;
bottom: 0;
overflow: auto;
margin-top: 60px;
.dw {
height: 400px;
}
}
::-webkit-scrollbar {
height: 0;
width: 0;
color: transparent;
}
}
.lowerRight {
position: fixed;
z-index: 9999;
bottom: 30px;
right: 30px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.typeface {
margin: 5px 0px;
font-size: 16px;
font-weight: bold;
cursor: pointer;
}
.typefacexz {
margin: 5px 0px;
font-size: 16px;
font-weight: bold;
color: #4b85f1;
cursor: pointer;
}
.second {
margin: 5px 0px;
font-size: 16px;
cursor: pointer;
}
.secondxz {
margin: 5px 0px;
font-size: 16px;
color: #4b85f1;
cursor: pointer;
}
}
//响应式布局 1366
@media screen and (max-width : 1366px){
.lowerRight {
position: fixed;
z-index: 9999;
bottom: 30px;
right: 0px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
}
}
</style>
效果图: