Skip to content

Commit 96277c5

Browse files
smastromsmastrom
committed
x
1 parent 8d8ec00 commit 96277c5

File tree

4 files changed

+50
-69
lines changed

4 files changed

+50
-69
lines changed

‎packages/vue-use-fixed-header/src/useFixedHeader.ts

Lines changed: 10 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -32,10 +32,6 @@ export function useFixedHeader(
3232

3333
const { enterStyles, leaveStyles } = TRANSITION_STYLES
3434

35-
const root = () => (options.root || options.root === null ? unref(options.root) : null)
36-
const transitionOpacity = () =>
37-
options.transitionOpacity === undefined ? false : unref(options.transitionOpacity)
38-
3935
const isReduced = useReducedMotion()
4036

4137
// State
@@ -57,17 +53,17 @@ export function useFixedHeader(
5753
// Utils
5854

5955
function getRoot() {
60-
const _root = root()
56+
const _root = unref(options.root)
6157
if (_root != null) return _root
6258

6359
return document.documentElement
6460
}
6561

66-
function getScrollTop() {
67-
const root = getRoot()
68-
if (!root) return 0
62+
const getScrollTop = () => getRoot().scrollTop
6963

70-
return root.scrollTop
64+
function getScrollRoot() {
65+
const root = getRoot()
66+
return root === document.documentElement ? document : root
7167
}
7268

7369
function isFixed() {
@@ -104,8 +100,7 @@ export function useFixedHeader(
104100
toggleListeners()
105101
})
106102

107-
const root = getRoot()
108-
if (root) internal.resizeObserver.observe(root)
103+
internal.resizeObserver.observe(getRoot())
109104
}
110105

111106
function onVisible() {
@@ -115,7 +110,7 @@ export function useFixedHeader(
115110

116111
setStyles({
117112
...enterStyles,
118-
...(transitionOpacity() ? { opacity: 1 } : {}),
113+
...(unref(options.transitionOpacity) ? { opacity: 1 } : {}),
119114
visibility: '' as CSS['visibility'],
120115
})
121116

@@ -125,7 +120,7 @@ export function useFixedHeader(
125120
function onHidden() {
126121
if (state.value === State.LEAVE) return
127122

128-
setStyles({ ...leaveStyles, ...(transitionOpacity() ? { opacity: 0 } : {}) })
123+
setStyles({ ...leaveStyles, ...(unref(options.transitionOpacity) ? { opacity: 0 } : {}) })
129124

130125
setState(State.LEAVE)
131126

@@ -198,22 +193,12 @@ export function useFixedHeader(
198193
const onScroll = createScrollHandler()
199194

200195
function addScrollListener() {
201-
const root = getRoot()
202-
if (!root) return
203-
204-
const scrollRoot = root === document.documentElement ? document : root
205-
206-
scrollRoot.addEventListener('scroll', onScroll, { passive: true })
196+
getScrollRoot().addEventListener('scroll', onScroll, { passive: true })
207197
internal.isListeningScroll = true
208198
}
209199

210200
function removeScrollListener() {
211-
const root = getRoot()
212-
if (!root) return
213-
214-
const scrollRoot = root === document.documentElement ? document : root
215-
216-
scrollRoot.removeEventListener('scroll', onScroll)
201+
getScrollRoot().removeEventListener('scroll', onScroll)
217202
internal.isListeningScroll = false
218203
}
219204

‎playground/assets/global.css

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
:root {
22
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
33
line-height: 1.5;
4-
background-image: var(--Gradient);
4+
background: var(--AccentBrightColor);
55
-webkit-font-smoothing: antialiased;
66
-moz-osx-font-smoothing: grayscale;
77
text-rendering: optimizeLegibility;
@@ -11,7 +11,9 @@
1111
--AccentColor: #00976b;
1212
--TextColor: #494949;
1313
--WhiteColor: #fff;
14-
--Gradient: linear-gradient(to top, #00ff8d 0%, #00c68c 100%);
14+
--AccentBrightColor: #2fe292;
15+
--AccentLightColor: #d5ece2;
16+
--AccentDarkColor: #076046;
1517
}
1618

1719
:root {

‎playground/components/Header.vue

Lines changed: 30 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@ import { useFixedHeader } from 'vue-use-fixed-header'
55
const headerRef = ref<HTMLElement | null>(null)
66
77
const { styles } = useFixedHeader(headerRef)
8+
9+
const linkProps = { target: '_blank', class: 'Nav_List_Link' }
810
</script>
911

1012
<template>
@@ -14,48 +16,42 @@ const { styles } = useFixedHeader(headerRef)
1416
<h2 class="Global_Logo">Vufh</h2>
1517
<ul class="Nav_List">
1618
<li class="Nav_List_Dropdown_Trigger Nav_List_Hidden">
17-
<a target="_blank" href="https://github.com/smastrom/vue-use-fixed-header">
19+
<a v-bind="linkProps" href="https://github.com/smastrom/vue-use-fixed-header">
1820
Dropdown
1921
</a>
2022

2123
<ul class="Nav_List_Dropdown">
22-
<li>
23-
<a target="_blank" href="#">Dropdown Item 1</a>
24-
</li>
25-
<li>
26-
<a target="_blank" href="#">Dropdown Item 2</a>
27-
</li>
28-
<li>
29-
<a target="_blank" href="#">Dropdown Item 3</a>
30-
</li>
24+
<li><a v-bind="linkProps" href="#">Dropdown Item 1</a></li>
25+
<li><a v-bind="linkProps" href="#">Dropdown Item 2</a></li>
26+
<li><a v-bind="linkProps" href="#">Dropdown Item 3</a></li>
3127
</ul>
3228
</li>
3329

3430
<li>
35-
<a target="_blank" href="https://github.com/smastrom/vue-use-fixed-header">
31+
<a v-bind="linkProps" href="https://github.com/smastrom/vue-use-fixed-header">
3632
GitHub
3733
</a>
3834
</li>
3935
<li class="Nav_List_Hidden">
40-
<a target="_blank" href="https://www.npmjs.com/package/vue-use-fixed-header"
41-
>NPM</a
42-
>
36+
<a v-bind="linkProps" href="https://www.npmjs.com/package/vue-use-fixed-header">
37+
NPM
38+
</a>
4339
</li>
4440
<li class="Nav_List_Hidden">
4541
<a
46-
target="_blank"
42+
v-bind="linkProps"
4743
href="https://stackblitz.com/@smastrom/collections/vue-use-fixed-header"
4844
>
4945
Examples
5046
</a>
5147
</li>
5248
<li>
5349
<a
54-
target="_blank"
5550
class="Nav_List_Button"
56-
href="https://github.com/smastrom/vue-use-fixed-header/blob/main/demo/Header.vue"
51+
target="_blank"
52+
href="https://github.com/smastrom/vue-use-fixed-header/blob/main/playground/components/Header.vue"
5753
>
58-
View Code
54+
See Code
5955
</a>
6056
</li>
6157
</ul>
@@ -80,9 +76,8 @@ const { styles } = useFixedHeader(headerRef)
8076
border-radius: 1rem;
8177
width: 1280px;
8278
max-width: 100%;
83-
height: 80px;
8479
margin: 1rem;
85-
padding: 1rem;
80+
padding: 0.875rem;
8681
display: flex;
8782
align-items: center;
8883
justify-content: space-between;
@@ -103,7 +98,7 @@ const { styles } = useFixedHeader(headerRef)
10398
align-items: center;
10499
}
105100
106-
.Nav_List a {
101+
.Nav_List_Link {
107102
color: var(--TextColor);
108103
text-decoration: none;
109104
transition: color 200ms ease-in-out;
@@ -113,17 +108,12 @@ const { styles } = useFixedHeader(headerRef)
113108
position: relative;
114109
}
115110
116-
.Nav_List_Dropdown_Trigger:hover .Nav_List_Dropdown {
117-
display: flex;
118-
}
119-
120111
.Nav_List_Dropdown {
121112
position: absolute;
122-
top: 45px;
123-
left: 0;
113+
top: 40px;
114+
left: -1rem;
124115
width: 200px;
125116
background-color: var(--WhiteColor);
126-
box-shadow: var(--Shadow);
127117
border-radius: 0.5rem;
128118
padding: 1rem;
129119
display: none;
@@ -134,24 +124,29 @@ const { styles } = useFixedHeader(headerRef)
134124
135125
.Nav_List_Button {
136126
background-color: var(--AccentColor);
137-
color: var(--WhiteColor) !important;
138-
padding: 0.75rem 1rem;
127+
color: var(--WhiteColor);
128+
padding: 0.5rem 1rem;
139129
border-radius: 0.5rem;
140-
transition: opacity 200ms ease-in-out !important;
130+
transition: all 200ms ease-in-out;
131+
text-decoration: none;
141132
}
142133
143134
@media (hover: hover) {
135+
.Nav_List_Dropdown_Trigger:hover .Nav_List_Dropdown {
136+
display: flex;
137+
}
138+
144139
.Nav_List_Dropdown_Trigger:hover > a {
145140
color: var(--AccentColor);
146141
}
147142
148-
.Nav_List a:hover {
143+
.Nav_List_Link:hover,
144+
.Nav_List_Dropdown a:hover {
149145
color: var(--AccentColor);
150-
text-decoration: none;
151146
}
152147
153148
.Nav_List_Button:hover {
154-
opacity: 0.5;
149+
opacity: 0.75;
155150
}
156151
}
157152
@@ -163,7 +158,7 @@ const { styles } = useFixedHeader(headerRef)
163158
gap: 2rem;
164159
}
165160
.Nav_List_Hidden {
166-
display: none !important;
161+
display: none;
167162
}
168163
}
169164
</style>

‎playground/components/WithContainer.vue

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -22,9 +22,9 @@ const { styles } = useFixedHeader(headerRef, {
2222
<a
2323
target="_blank"
2424
class="Header_Button"
25-
href="https://github.com/smastrom/vue-use-fixed-header/blob/main/demo/WithContainer.vue"
25+
href="https://github.com/smastrom/vue-use-fixed-header/blob/main/playground/components/WithContainer.vue"
2626
>
27-
View Code
27+
See Code
2828
</a>
2929
</div>
3030
</header>
@@ -55,7 +55,7 @@ const { styles } = useFixedHeader(headerRef, {
5555
}
5656
5757
.Header_Wrapper {
58-
padding: 1rem;
58+
padding: 0.875rem;
5959
position: sticky;
6060
top: 0;
6161
}
@@ -65,7 +65,7 @@ const { styles } = useFixedHeader(headerRef, {
6565
background-color: var(--AccentColor);
6666
display: flex;
6767
align-items: center;
68-
padding: 1rem;
68+
padding: 0.875rem;
6969
border-radius: 1rem;
7070
}
7171
@@ -74,7 +74,7 @@ const { styles } = useFixedHeader(headerRef, {
7474
}
7575
7676
.Header_Button {
77-
color: var(--AccentColor);
77+
color: var(--AccentDarkColor);
7878
background-color: var(--WhiteColor);
7979
border-radius: 0.5rem;
8080
line-height: 1;
@@ -87,8 +87,7 @@ const { styles } = useFixedHeader(headerRef, {
8787
8888
@media (hover: hover) {
8989
.Header_Button:hover {
90-
color: var(--WhiteColor);
91-
background-color: var(--AccentColor);
90+
background-color: var(--AccentLightColor);
9291
}
9392
}
9493

0 commit comments

Comments
 (0)