-
Notifications
You must be signed in to change notification settings - Fork 4
/
WithContainer.vue
106 lines (93 loc) · 2.33 KB
/
WithContainer.vue
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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<script setup lang="ts">
import { ref } from 'vue'
import { useFixedHeader } from 'vue-use-fixed-header'
import Header from './Header.vue'
const containerRef = ref<HTMLElement | null>(null)
const headerRef = ref<HTMLElement | null>(null)
const { styles } = useFixedHeader(headerRef, {
root: containerRef,
})
</script>
<template>
<div class="Scroll_Container" ref="containerRef">
<div class="Container">
<header class="Header_Wrapper" ref="headerRef" :style="styles">
<div class="Header_Container">
<h2 class="Global_Logo">Vufh</h2>
<a
target="_blank"
class="Header_Button"
href="https://github.com/smastrom/vue-use-fixed-header/blob/main/playground/components/WithContainer.vue"
>
See Code
</a>
</div>
</header>
<div class="Content">
<h2>Custom Scroll Container</h2>
<p>Scroll this container to hide/show the header.</p>
</div>
</div>
</div>
</template>
<style scoped>
.Scroll_Container {
height: 700px;
max-width: calc(100% - 4rem);
width: 600px;
margin: auto;
overflow: auto;
border-radius: 1.5rem;
background-color: var(--WhiteColor);
box-shadow: var(--Shadow);
}
.Container {
height: 1800px;
position: relative;
background-color: var(--WhiteColor);
}
.Header_Wrapper {
padding: 0.875rem;
position: sticky;
top: 0;
}
.Header_Container {
justify-content: space-between;
background-color: var(--AccentColor);
display: flex;
align-items: center;
padding: 0.875rem;
border-radius: 1rem;
}
.Header_Container .Global_Logo {
color: var(--WhiteColor);
}
.Header_Button {
color: var(--AccentDarkColor);
background-color: var(--WhiteColor);
border-radius: 0.5rem;
line-height: 1;
padding: 0.65rem 1rem;
text-decoration: none;
transition:
color 200ms ease-in-out,
background-color 200ms ease-in-out;
}
@media (hover: hover) {
.Header_Button:hover {
background-color: var(--AccentLightColor);
}
}
.Content {
position: sticky;
margin: auto;
top: 40%;
justify-content: center;
align-items: center;
color: var(--TextColor);
display: flex;
flex-direction: column;
padding: 1rem;
text-align: center;
}
</style>