1. Home
  2. Docs
  3. Components
  4. Layout
  5. Sticky

Sticky

Sticky allows an element to become fixed in its parent container when it reaches a top, left, bottom, or right threshold.

Usage

StickyExample.tsx
  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33
  34. 34
  35. 35
  36. 36
  37. 37
  38. 38
  39. 39
  40. 40
  41. 41
  42. 42
  43. 43
  44. 44
  45. 45
  46. 46
  47. 47
  48. 48
  49. 49
  50. 50
  51. 51
  52. 52
  53. 53
  54. 54
  55. 55
  56. 56
  57. 57
  58. 58
  59. 59
  60. 60
  61. 61
  62. 62
  63. 63
  64. 64
  65. 65
  66. 66
  67. 67
  68. 68
  69. 69
  70. 70
  71. 71
  72. 72
  73. 73
  74. 74
  75. 75
  76. 76
  77. 77
  78. 78
  79. 79
  80. 80
  81. 81
  82. 82
  83. 83
  84. 84
  85. 85
  86. 86
  87. 87
  88. 88
  89. 89
  90. 90
  91. 91
  92. 92
  93. 93
  94. 94
  95. 95
  96. 96
  97. 97
  98. 98
  99. 99
  100. 100
  101. 101
  102. 102
  103. 103
  104. 104
  105. 105
  106. 106
  107. 107
  108. 108
  109. 109
  110. 110
  111. 111
  112. 112
  113. 113
  114. 114
  115. 115
  116. 116
  117. 117
  118. 118
  119. 119
  120. 120
  121. 121
  122. 122
  123. 123
  124. 124
  125. 125
  126. 126
  127. 127
  128. 128
  129. 129
  130. 130
  131. 131
  132. 132
  133. 133
  134. 134
  135. 135
  136. 136
  137. 137
  138. 138
  139. 139
  140. 140
  141. 141
  142. 142
  143. 143
  144. 144
  145. 145
  146. 146
  147. 147
  148. 148
  149. 149
  150. 150
  151. 151
  152. 152
  153. 153
  154. 154
  155. 155
  156. 156
  157. 157
  158. 158
  159. 159
  160. 160
  161. 161
  162. 162
  163. 163
  164. 164
  165. 165
  166. 166
  167. 167
  168. 168
  169. 169
  170. 170
  171. 171
  172. 172
  173. 173
  174. 174
  175. 175
  176. 176
  177. 177
  178. 178
  179. 179
  180. 180
  181. 181
  182. 182
  183. 183
  184. 184
  185. 185
  186. 186
  187. 187
  188. 188
  189. 189
  190. 190
  191. 191
  192. 192
  193. 193
  194. 194
  195. 195
  196. 196
  197. 197
  198. 198
  199. 199
  200. 200
  201. 201
  202. 202
  203. 203
  204. 204
  205. 205
  206. 206
  207. 207
  208. 208
  209. 209
  210. 210
  211. 211
  212. 212
  213. 213
  214. 214
  215. 215
  216. 216
  217. 217
  218. 218
  219. 219
  220. 220
  221. 221
  222. 222
  223. 223
  224. 224
  225. 225
  226. 226
  227. 227
  228. 228
  229. 229
  230. 230
  231. 231
  232. 232
  233. 233
  234. 234
  235. 235
  236. 236
  237. 237
  238. 238
  239. 239
  240. 240
  241. 241
  242. 242
  243. 243
  244. 244
  245. 245
  246. 246
  247. 247
  248. 248
  249. 249
  250. 250
  251. 251
  252. 252
  253. 253
  254. 254
  255. 255
  256. 256
  257. 257
  258. 258
  259. 259
  260. 260
  261. 261
  262. 262
  263. 263
  264. 264
  265. 265
  266. 266
  267. 267
  268. 268
  269. 269
  270. 270
  271. 271
  272. 272
  273. 273
  274. 274
  275. 275
  276. 276
  277. 277
  278. 278
  279. 279
  280. 280
  281. 281
  282. 282
  283. 283
  284. 284
<div className="bg-muted-100 h-48 w-96 overflow-auto rounded-lg p-4">
	<section>
		<Sticky className="top-0">
			<h2 className="bg-muted-100 float-right -mt-4 p-4">A</h2>
		</Sticky>
		<ul>
			<li>Aaron Cooper</li>
			<li>Abigail Evans</li>
			<li>Adam Smith</li>
			<li>Alice Johnson</li>
			<li>Amelia Thomas</li>
		</ul>
	</section>
	<section>
		<Sticky className="top-0">
			<h2 className="bg-muted-100 float-right -mt-4 p-4">B</h2>
		</Sticky>
		<ul>
			<li>Bella Morgan</li>
			<li>Benjamin Lee</li>
			<li>Benjamin Nguyen</li>
			<li>Brandon Carter</li>
		</ul>
	</section>
	<section>
		<Sticky className="top-0">
			<h2 className="bg-muted-100 float-right -mt-4 p-4">C</h2>
		</Sticky>
		<ul>
			<li>Cameron Reed</li>
			<li>Charlotte Evans</li>
			<li>Chloe Brown</li>
			<li>Chloe Martinez</li>
		</ul>
	</section>
	<section>
		<Sticky className="top-0">
			<h2 className="bg-muted-100 float-right -mt-4 p-4">D</h2>
		</Sticky>
		<ul>
			<li>Daniel Brown</li>
			<li>Daniel Jackson</li>
			<li>David Martinez</li>
			<li>Dylan Baker</li>
		</ul>
	</section>
	<section>
		<Sticky className="top-0">
			<h2 className="bg-muted-100 float-right -mt-4 p-4">E</h2>
		</Sticky>
		<ul>
			<li>Elena Torres</li>
			<li>Emily Garcia</li>
			<li>Emily White</li>
			<li>Emma Nguyen</li>
		</ul>
	</section>
	<section>
		<Sticky className="top-0">
			<h2 className="bg-muted-100 float-right -mt-4 p-4">F</h2>
		</Sticky>
		<ul>
			<li>Finn Walker</li>
			<li>Finnegan Patel</li>
			<li>Fiona Patel</li>
			<li>Frank Thompson</li>
		</ul>
	</section>
	<section>
		<Sticky className="top-0">
			<h2 className="bg-muted-100 float-right -mt-4 p-4">G</h2>
		</Sticky>
		<ul>
			<li>Gabriella Diaz</li>
			<li>Gavin Ross</li>
			<li>Grace Garcia</li>
			<li>Grace Lewis</li>
		</ul>
	</section>
	<section>
		<Sticky className="top-0">
			<h2 className="bg-muted-100 float-right -mt-4 p-4">H</h2>
		</Sticky>
		<ul>
			<li>Hannah Ramirez</li>
			<li>Hayden Foster</li>
			<li>Henry Foster</li>
			<li>Henry Martinez</li>
		</ul>
	</section>
	<section>
		<Sticky className="top-0">
			<h2 className="bg-muted-100 float-right -mt-4 p-4">I</h2>
		</Sticky>
		<ul>
			<li>Ian Parker</li>
			<li>Isabel Clark</li>
			<li>Isabella Wright</li>
			<li>Isabelle Moore</li>
		</ul>
	</section>
	<section>
		<Sticky className="top-0">
			<h2 className="bg-muted-100 float-right -mt-4 p-4">J</h2>
		</Sticky>
		<ul>
			<li>Jack Robinson</li>
			<li>Jacob Turner</li>
			<li>Jake Mitchell</li>
			<li>Jasmine Kim</li>
		</ul>
	</section>
	<section>
		<Sticky className="top-0">
			<h2 className="bg-muted-100 float-right -mt-4 p-4">K</h2>
		</Sticky>
		<ul>
			<li>Kaitlyn Hall</li>
			<li>Katherine Adams</li>
			<li>Katherine Baker</li>
			<li>Kyle Lewis</li>
		</ul>
	</section>
	<section>
		<Sticky className="top-0">
			<h2 className="bg-muted-100 float-right -mt-4 p-4">L</h2>
		</Sticky>
		<ul>
			<li>Liam Harris</li>
			<li>Liam Wright</li>
			<li>Lily Sullivan</li>
			<li>Lucas Gray</li>
		</ul>
	</section>
	<section>
		<Sticky className="top-0">
			<h2 className="bg-muted-100 float-right -mt-4 p-4">M</h2>
		</Sticky>
		<ul>
			<li>Mackenzie Young</li>
			<li>Madison Harris</li>
			<li>Madison Perez</li>
			<li>Michael Russell</li>
		</ul>
	</section>
	<section>
		<Sticky className="top-0">
			<h2 className="bg-muted-100 float-right -mt-4 p-4">N</h2>
		</Sticky>
		<ul>
			<li>Natalie Hill</li>
			<li>Nathan Stewart</li>
			<li>Nathan Turner</li>
			<li>Nora Murphy</li>
		</ul>
	</section>
	<section>
		<Sticky className="top-0">
			<h2 className="bg-muted-100 float-right -mt-4 p-4">O</h2>
		</Sticky>
		<ul>
			<li>Oliver Phillips</li>
			<li>Olivia Lopez</li>
			<li>Olivia Young</li>
			<li>Owen Nelson</li>
		</ul>
	</section>
	<section>
		<Sticky className="top-0">
			<h2 className="bg-muted-100 float-right -mt-4 p-4">P</h2>
		</Sticky>
		<ul>
			<li>Paige Adams</li>
			<li>Patrick Campbell</li>
			<li>Penelope Reed</li>
			<li>Peter Scott</li>
		</ul>
	</section>
	<section>
		<Sticky className="top-0">
			<h2 className="bg-muted-100 float-right -mt-4 p-4">Q</h2>
		</Sticky>
		<ul>
			<li>Quentin Parker</li>
			<li>Quinn Taylor</li>
			<li>Quinn Wright</li>
		</ul>
	</section>
	<section>
		<Sticky className="top-0">
			<h2 className="bg-muted-100 float-right -mt-4 p-4">R</h2>
		</Sticky>
		<ul>
			<li>Rachel Green</li>
			<li>Rachel Smith</li>
			<li>Ruby Patel</li>
			<li>Ryan Thompson</li>
		</ul>
	</section>
	<section>
		<Sticky className="top-0">
			<h2 className="bg-muted-100 float-right -mt-4 p-4">S</h2>
		</Sticky>
		<ul>
			<li>Samuel Hall</li>
			<li>Samuel Lee</li>
			<li>Sophia Clark</li>
			<li>Steven Sanchez</li>
		</ul>
	</section>
	<section>
		<Sticky className="top-0">
			<h2 className="bg-muted-100 float-right -mt-4 p-4">T</h2>
		</Sticky>
		<ul>
			<li>Taylor Carter</li>
			<li>Taylor Ross</li>
			<li>Thomas Baker</li>
			<li>Tiffany Martinez</li>
		</ul>
	</section>
	<section>
		<Sticky className="top-0">
			<h2 className="bg-muted-100 float-right -mt-4 p-4">U</h2>
		</Sticky>
		<ul>
			<li>Ulysses Quinn</li>
			<li>Uma Wilson</li>
		</ul>
	</section>
	<section>
		<Sticky className="top-0">
			<h2 className="bg-muted-100 float-right -mt-4 p-4">V</h2>
		</Sticky>
		<ul>
			<li>Vanessa Campbell</li>
			<li>Victor Johnson</li>
			<li>Victoria King</li>
			<li>Violet Cooper</li>
		</ul>
	</section>
	<section>
		<Sticky className="top-0">
			<h2 className="bg-muted-100 float-right -mt-4 p-4">W</h2>
		</Sticky>
		<ul>
			<li>William Moore</li>
			<li>Willow Carter</li>
			<li>Wyatt Davis</li>
			<li>Wyatt Hayes</li>
		</ul>
	</section>
	<section>
		<Sticky className="top-0">
			<h2 className="bg-muted-100 float-right -mt-4 p-4">X</h2>
		</Sticky>
		<ul>
			<li>Xander Roberts</li>
			<li>Xavier Thompson</li>
			<li>Ximena Rivera</li>
		</ul>
	</section>
	<section>
		<Sticky className="top-0">
			<h2 className="bg-muted-100 float-right -mt-4 p-4">Y</h2>
		</Sticky>
		<ul>
			<li>Yara Ortiz</li>
			<li>Yasmine Allen</li>
			<li>Yasmine Johnson</li>
		</ul>
	</section>
	<section>
		<Sticky className="top-0">
			<h2 className="bg-muted-100 float-right -mt-4 p-4">Z</h2>
		</Sticky>
		<ul>
			<li>Zachary Adams</li>
			<li>Zachary Edwards</li>
			<li>Zachary Turner</li>
			<li>Zoe Rodriguez</li>
		</ul>
	</section>
</div>

Here's the <Sticky /> component in action.

A

  • Aaron Cooper
  • Abigail Evans
  • Adam Smith
  • Alice Johnson
  • Amelia Thomas

B

  • Bella Morgan
  • Benjamin Lee
  • Benjamin Nguyen
  • Brandon Carter

C

  • Cameron Reed
  • Charlotte Evans
  • Chloe Brown
  • Chloe Martinez

D

  • Daniel Brown
  • Daniel Jackson
  • David Martinez
  • Dylan Baker

E

  • Elena Torres
  • Emily Garcia
  • Emily White
  • Emma Nguyen

F

  • Finn Walker
  • Finnegan Patel
  • Fiona Patel
  • Frank Thompson

G

  • Gabriella Diaz
  • Gavin Ross
  • Grace Garcia
  • Grace Lewis

H

  • Hannah Ramirez
  • Hayden Foster
  • Henry Foster
  • Henry Martinez

I

  • Ian Parker
  • Isabel Clark
  • Isabella Wright
  • Isabelle Moore

J

  • Jack Robinson
  • Jacob Turner
  • Jake Mitchell
  • Jasmine Kim

K

  • Kaitlyn Hall
  • Katherine Adams
  • Katherine Baker
  • Kyle Lewis

L

  • Liam Harris
  • Liam Wright
  • Lily Sullivan
  • Lucas Gray

M

  • Mackenzie Young
  • Madison Harris
  • Madison Perez
  • Michael Russell

N

  • Natalie Hill
  • Nathan Stewart
  • Nathan Turner
  • Nora Murphy

O

  • Oliver Phillips
  • Olivia Lopez
  • Olivia Young
  • Owen Nelson

P

  • Paige Adams
  • Patrick Campbell
  • Penelope Reed
  • Peter Scott

Q

  • Quentin Parker
  • Quinn Taylor
  • Quinn Wright

R

  • Rachel Green
  • Rachel Smith
  • Ruby Patel
  • Ryan Thompson

S

  • Samuel Hall
  • Samuel Lee
  • Sophia Clark
  • Steven Sanchez

T

  • Taylor Carter
  • Taylor Ross
  • Thomas Baker
  • Tiffany Martinez

U

  • Ulysses Quinn
  • Uma Wilson

V

  • Vanessa Campbell
  • Victor Johnson
  • Victoria King
  • Violet Cooper

W

  • William Moore
  • Willow Carter
  • Wyatt Davis
  • Wyatt Hayes

X

  • Xander Roberts
  • Xavier Thompson
  • Ximena Rivera

Y

  • Yara Ortiz
  • Yasmine Allen
  • Yasmine Johnson

Z

  • Zachary Adams
  • Zachary Edwards
  • Zachary Turner
  • Zoe Rodriguez

You are responsible for giving it a top-x, left-x, bottom-x or right-x position to stick to.

Parts and their API

Source

sticky.tsx
  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33
import { type HTMLAttributes, type PropsWithChildren, forwardRef } from 'react'
import { cn } from '#app/utils/tailwind-merge.ts'


/**
 * Sticky component.
 *
 * @component
 * @example
 * ```jsx
 * <div className="mt-14 h-80 overflow-y-auto rounded-lg border">
 * 	<div className="h-10" />
 * 	<Sticky className="top-0 bg-green-500">This sticks</Sticky>
 * 	<div className="h-40" />
 * 	<p>Some content</p>
 * 	<div className="h-40" />
 * 	<Sticky className="top-0 bg-emerald-500">This also sticks</Sticky>
 * 	<div className="h-40" />
 * 	<p>Some more content</p>
 * 	<div className="h-40" />
 * </div>
 * ```
 *
 * @param {string} [className] - Additional CSS class names.
 * @param {React.HTMLAttributes<HTMLDivElement>} [props] - Additional HTML attributes.
 * @returns {JSX.Element} The Sticky component.
 */
const Sticky = forwardRef<HTMLDivElement, PropsWithChildren<HTMLAttributes<HTMLDivElement>>>(({ className, ...props }, ref) => {
	return <div ref={ref} className={cn('sticky', className)} {...props} />
})
Sticky.displayName = 'Sticky'


export { Sticky }