In TailwindCSS, the fixed and sticky are utility classes used for positioning elements. Below, I will explain their usage separately and provide some examples.
Fixed positioning
The fixed class in TailwindCSS sets the element's positioning to fixed, meaning it is positioned relative to the viewport and remains in place even when the page scrolls.
Example:
<div class="fixed top-0 left-0 right-0"> <!-- Navigation bar content --> </div>
The above code fixes the navigation bar to the top of the page. top-0, left-0, and right-0 are TailwindCSS utility classes that position the top, left, and right edges of the navigation bar to the viewport edges.
Sticky positioning
Sticky positioning is a hybrid mode that combines relative and fixed positioning. The element behaves as if it is relative positioned until the page scrolls to a certain threshold, after which it becomes fixed at the specified position.
In TailwindCSS, the sticky class corresponds to the sticky property and is typically used with top, bottom, left, or right to define where the element becomes fixed.
Example:
<div class="sticky top-20"> <!-- Sidebar content --> </div>
In this example, top-20 is a utility class that sets the position where the element becomes fixed when scrolled to 20 pixels from the top of the viewport. By default, the element is positioned relatively, and it becomes fixed when the top edge of the element approaches 20 pixels from the top of the viewport.
In summary, fixed and sticky positioning are two commonly used CSS positioning methods that can be easily implemented in TailwindCSS using the corresponding utility classes. Using these classes helps you quickly build user interface elements with fixed or sticky positioning.