index.vue
936 Bytes
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<template>
<nav
class="zk_fixed_nav"
:class="{ zk_set_fixed : fixed, zk_fixed_border: !backgroundColor && fixed }"
:style="{
'background-color': `${backgroundColor}`
}"
>
<slot />
</nav>
</template>
<script>
export default {
props: {
height: { // 浮现距离
type: Number,
default: 0
},
backgroundColor: {
type: String,
default: ''
}
},
data () {
return {
fixed: false
}
},
mounted () {
window.addEventListener('scroll', () => { this.zk_fixed_nav() })
},
methods: {
zk_fixed_nav () {
if (!this.height) { return }
this.fixed = window.scrollY > this.height
}
}
}
</script>
<style lang="scss" scoped>
.zk_fixed_nav{
width: 100%;
}
.zk_set_fixed {
width: 100%;
position: fixed;
top: 0;
z-index: 9;
}
.zk_fixed_border{
background-color: #FFF;
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1)
}
</style>