xxxxxxxxxx1
<template>2
<div class="navMenu">3
<div :class="[{ selectedStep: currentStep == 0},'step']" @click="loadStep(0)">4
<div class="stepContent"><span>Start</span></div>5
</div>6
<div :class="[{ selectedStep: currentStep == 1},'step']" @click="loadStep(1)">7
<div class="stepContent"><span>Level: 1</span></div>8
</div>9
<div :class="[{ selectedStep: currentStep == 2},'step']" @click="loadStep(2)">10
<div class="stepContent"><span>Level: 2</span></div>11
</div>12
<div :class="[{ selectedStep: currentStep == 3},'step']" @click="loadStep(3)">13
<div class="stepContent"><span>Level: 3</span></div>14
</div>15
<div :class="[{ selectedStep: currentStep == 4},'step']" @click="loadStep(4)">16
<div class="stepContent"><span>End</span></div>17
</div>18
</div>19
</template>xxxxxxxxxx1
body{2
height: 3000px;3
background: linear-gradient(to bottom, #1a2a6c, #b21f1f, #fdbb2d);4
}body::after{5
content: "Scroll Indicator";6
font-size: 35px;7
padding: 5px;8
width: 300px;9
top: 25px;10
position: absolute;11
text-align: center;12
color: whiite;13
margin: 0 auto 0 auto;14
left: 0;15
right: 0;16
color: white;17
background-color: #33b6e5;18
border-radius: 10px;19
}20
.navMenu {21
box-sizing: border-box;22
width: 200px;23
height: 100vh;24
padding: 200px 0 200px 0;25
position: fixed;26
display: flex;27
flex-direction: column;28
text-align: center;29
color: black;30
font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode";31
font-weight: bold;32
font-size: 17px;33
transform: translateX(-20px);34
}35
.step {36
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);37
cursor: pointer;38
user-select: none;39
margin: 0;40
flex: 1;41
transition: height 0.2s, flex 0.2s, font-size 0.2s, border 0.2s, background-color 0.2s;42
}43
.step .stepContent {44
display: flex;45
height: 100%;46
justify-content: center;47
flex-direction: column;48
position: relative;49
transition: transform 0.2s;50
transform: translateX(-20px);51
}52
.step .stepContent::before {53
content: "";54
background-color: aliceblue;55
position: absolute;56
width: 100%;57
height: 35px;58
z-index: -1;59
opacity: 0.8;60
left: -10px;61
box-shadow: 0px 0px 9px -1px #33b6e5b9;62
}63
.step .stepContent:hover {64
transform: translateX(-10px);65
}66
.step .stepContent:hover::after {67
content: "";68
position: absolute;69
right: 0;70
height: 20px;71
border-right: 2px solid black;72
}73
74
.selectedStep {75
color: white;76
font-size: 22px;77
}78
.selectedStep .stepContent {79
transform: translateX(10px) !important;80
}81
.selectedStep .stepContent::before {82
content: "";83
background-color: #0085b3;84
position: absolute;85
width: 100%;86
height: 35px;87
z-index: -1;88
opacity: 0.9;89
left: -10px;90
box-shadow: 0px 0px 9px -1px #33b6e5b9;91
}92
.selectedStep .stepContent::after {93
content: "";94
position: absolute;95
right: 0;96
height: 25px !important;97
border-right: 2px solid black !important;98
}xxxxxxxxxx1
export default {2
name: 'navMenu',3
data () {4
return {5
currentStep: 0,6
steps: [ //In which scroll position should menu change status7
0,8
400,9
800,10
1200,11
1600,12
]13
};14
},15
created() {16
window.addEventListener('scroll', this.handleScroll);17
this.handleScroll();18
},19
methods: {20
loadStep(step) {21
this.currentStep = step;22
window.scrollTo(0, this.steps[step]);23
},24
handleScroll() {25
let max = 0;26
let val = window.scrollY;27
console.log(val)28
this.steps.forEach((element, index) => {29
if(val >= element && val >= max){30
max = index;31
}32
});33
this.currentStep = max;34
}35
},36
37
}; Console errors: 0