You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
[Grab a copy](https://github.com/taocode/svelte-headroom) and play with it directly. Run `pnpm dev` (or yarn, npm equivalents) and edit the demo test page: `src/routes/+page.svelte`
13
+
## Source
14
+
15
+
[Get the source from the GitHub repository (@taocode/svelte-headroom)](https://github.com/taocode/svelte-headroom) and play with it directly. Run `pnpm dev` (or yarn, npm equivalents) and edit the demo test page: `src/routes/+page.svelte`
14
16
15
17
## Install
16
18
17
-
`pnpm install -D @taocode/svelte-headroom`
19
+
One of these:
20
+
21
+
-`pnpm install -D @taocode/svelte-headroom`
22
+
-`yarn add -D @taocode/svelte-headroom`
23
+
-`npm install -D @taocode/svelte-headroom`
18
24
19
25
## Usage
20
26
@@ -24,110 +30,145 @@ Svelte Headroom is a [Svelte](https://svelte.dev) component to hide or show your
24
30
</script>
25
31
26
32
<Headroom>
27
-
<!-- Header will be fixed at top and auto show/hide based on scroll -->
33
+
<!-- Header will be fixed at top
34
+
and auto show/hide based on scroll -->
28
35
</Headroom>
29
-
30
36
```
31
37
32
38
## Props
33
39
34
40
### `tolerance` number
35
41
36
-
The number of pixels that need to be scrolled in either direction for the effect to occur. This is useful if you want the user to be able to scroll slowly and not change the header position. Default: `0`.
42
+
The number of pixels that need to be scrolled in either direction for the effect to occur. This is useful if you want the user to be able to scroll slowly and not change the header position.
37
43
38
-
```html
44
+
__default: `0`__ -- _Overridden by `toleranceDown` and `toleranceUp`_
39
45
46
+
```html
40
47
<Headroomtolerance={10}>
41
-
<!--will ignore any scroll less than 10px -->
48
+
<!-- ignore any scroll less than 10px -->
42
49
</Headroom>
50
+
```
51
+
52
+
#### `toleranceDown` number
53
+
54
+
The number of pixels that need to be scrolled down for the effect to occur. This is useful if you want the user to be able to scroll slowly but respond differently to the downward direction.
The number of pixels from the top of the page before the effect is allowed to occur; *controls:*`class:atTop` (useful with hideAtTop, showAtTop). Default: `2`.
64
+
#### `toleranceUp` number
65
+
66
+
The number of pixels that need to be scrolled up for the effect to occur. This is useful if you want the user to be able to scroll slowly but respond differently in the upward direction.
The number of pixels from the top or bottom of the page before the effect is allowed to occur; *controls:*`class:atTop` and `class:atBottom` (useful with [(show|hide)At(Bottom|Top)](#ats)).
79
+
80
+
__default: `2`__ -- _Overridden by `offsetTop` and `offsetBottom`_
81
+
82
+
#### `offsetTop` number
83
+
84
+
The number of pixels from the top of the page before the effect is allowed to occur; *controls:*`class:atTop` (useful with hideAtTop, showAtTop).
50
85
86
+
__default: `offset`__ -- _Overrides `offset`_
87
+
88
+
```html
51
89
<HeadroomoffsetTop={50}>
52
90
<!-- will show until after 50px from top -->
53
91
</Headroom>
54
-
55
92
```
56
93
57
-
### `offsetBottom` number
94
+
####`offsetBottom` number
58
95
59
-
The number of pixels from bottom to be considered at the bottom; *controls*`class:atBottom` (useful with hideAtBottom, showAtBottom). Default: `2`.
96
+
The number of pixels from bottom to be considered at the bottom; *controls*`class:atBottom` (useful with hideAtBottom, showAtBottom).
60
97
61
-
```html
98
+
__default: `offset`__ -- _Overrides `offset`_
62
99
100
+
```html
63
101
<HeadroomshowAtBottomoffsetBottom={150}>
64
-
<!--will show when within 150px of bottom -->
102
+
<!-- show when within 150px of bottom -->
65
103
</Headroom>
66
-
67
104
```
68
105
69
106
### `duration` string
70
107
71
-
The duration of the sliding effect. The value is passed on as a [CSS Transition Duration](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-duration). Default: `"300ms"`.
108
+
The duration of the sliding effect. The value is passed on as a [CSS Transition Duration](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-duration).
72
109
73
-
```html
110
+
__default: `"300ms"`__
74
111
112
+
```html
75
113
<Headroomduration='500ms'>
76
-
<!--will take 500ms to transition -->
114
+
<!-- take 500ms to transition -->
77
115
</Headroom>
78
-
79
116
```
80
117
81
118
### `easing` string
82
119
83
-
The timing function (easing) of the sliding effect. The value is passed on as a [CSS Transition Timing Function](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function). Default: `"linear"`.
120
+
The timing function (easing) of the sliding effect. The value is passed on as a [CSS Transition Timing Function](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function).
84
121
85
-
```html
122
+
__default: `"linear"`__
86
123
124
+
```html
87
125
<Headroomeasing='ease-out'>
88
126
<!-- will ease-out -->
89
127
</Headroom>
90
-
91
128
```
92
129
93
130
### `bottom` boolean
94
131
95
-
If this is to be pinned to the bottom, like a return to top button. Default: `false`.
132
+
If this is to be pinned to the bottom, like a return to top button.
133
+
134
+
__default: `false`__
96
135
97
136
*Note:* you'll need to wrap a bottom pinned Headroom to use it because
98
137
it isn't 100% wide to avoid covering links and breaking the UI a bit.
99
138
You can play with heights and widths and different positioning; *see below for my favorite .totop-wrap*
100
139
101
140
```html
102
-
103
141
<divclass="totop-wrap">
104
142
<Headroombottom>
105
143
<!-- pinned to the bottom -->
106
144
</Headroom>
107
145
</div>
108
-
109
146
```
110
147
111
-
### `(show|hide)At(Top|Bottom)` boolean
148
+
### `(hide|show)At(Bottom|Top)` boolean
112
149
113
-
If this is to be pinned to the bottom, like a return to top button. Default: `false`.
150
+
If this is to be pinned to the bottom, like a return to top button.
114
151
115
-
*Note:* bottom detection fails on [SVELTE REPL]().
152
+
__default: `false`__
116
153
117
-
```html
154
+
*Note:* atBottom detection fails on [Svelte REPL](https://svelte.dev/repl/44cafd471bcf497080e12ed3bee80986?version=3.53.1).
118
155
156
+
```html
119
157
<HeadroomshowAtBottom>
120
-
<!--my header that will always show when at bottom -->
0 commit comments