Skip to content

Commit 7590094

Browse files
committed
Pkg - Edit README
1 parent 1dd92b9 commit 7590094

File tree

1 file changed

+9
-3
lines changed

1 file changed

+9
-3
lines changed

README.md

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ Turn your boring fixed header into a smart one with three lines of code.
1414

1515
- **Dead simple** - Write three lines of code and you're ready to go
1616
- **Enjoyable** - When scrolling down, the header is hidden, when scrolling up, the header is shown.
17-
- **Smart** - Behaves as expected on page load, scroll restoration, hovering, dropdown navigation, top-reached and reduced motion.
17+
- **Smart** - Behaves as expected on page load, hovering, dropdown navigation, top-reached and reduced motion.
1818
- **Dynamic** - Functionalities are automatically enabled/disabled if your header turns from fixed/sticky to something else or it is hidden at different viewports
1919
- **Flexible** - Works with any scrolling container
2020

@@ -113,13 +113,19 @@ const headerRef = ref(null)
113113
114114
const isPricingPage = computed(() => route.name === 'Pricing')
115115
116-
useFixedHeader(headerRef, {
116+
const { styles } useFixedHeader(headerRef, {
117117
watch: isPricingPage, // Will perform a check everytime the value changes
118118
})
119119
</script>
120120
121121
<template>
122-
<header ref="headerRef" :style="{ position: isPricingPage ? 'relative' : 'fixed' }">
122+
<header
123+
ref="headerRef"
124+
:style="{
125+
...styles,
126+
position: isPricingPage ? 'relative' : 'fixed',
127+
}"
128+
>
123129
<!-- Your content -->
124130
</header>
125131
</template>

0 commit comments

Comments
 (0)