Sticky

Make elements remain at the top of the viewport, like a sticky navbar.

Usage

To create an element that remains at the top of the viewport when scrolling down the site, add the data-f-sticky attribute to that element.

Example

Markup

<div data-f-sticky>...</div>

Define an offset

You can also position the element below the viewport edge. For example, add the data-f-sticky="{top:100}" attribute to create a margin of 100px.

Example

Markup

<div data-f-sticky="{top:100}">...</div>

Add a delay

To add a delay to the element, so it becomes sticky only after scrolling a specified distance, you need to add a negative offset to the data attribute, e.g. data-f-sticky="{top:-200}". You can also add an animation from the Animation component in order to have the sticky element reappear smoothly.

Example

Markup

<div data-f-sticky="{top:-200, animation: 'f-animation-slide-top'}">...</div>

Responsive behavior

You also have the possibility of disabling the sticky behavior for different devices by adding a breakpoint option to the data attribute, e.g. data-f-sticky="{media: 640}". Additionaly you can use any valid media query.

Markup

								<!-- This is basically a shortcode to define a min-width -->
								<div data-f-sticky="{media: 640}">...</div>

								<!-- This is a media string using the min-width and orientation properties -->
								<div data-f-sticky="{media: '(min-width: 640px) and (orientation: landscape)'}>...</div>
							

Sticky boundary

You can define the boundary of a sticky element by setting the boundary parameter. This keeps the sticky element within the dimensions of the boundary element.

Example

Markup

								<!-- Bind sticky to its parent element -->
								<div data-f-sticky="{boundary: true}">...</div>

								<!-- Bind sticky to any element -->
								<div data-f-sticky="{boundary: '#my-id'}">...</div>
							

JavaScript options

Init element manually

let sticky = FatKit.sticky(element, { /* options */ });