Sticky

Position Top

start: 0
end: !.container

start: 100%
end: !.container

start: 200
end: 500

start: 20vh
end: 50vh

Position Bottom

position: bottom
start: 0
end: !.container

position: bottom
start: 100%
end: !.container

position: bottom
start: 200
end: 500

position: bottom
start: 20vh
end: 50vh

Offset

position: top
offset: 50%
end: !.container

position: top
offset: 50vh
end: !.container

position: bottom
offset: -50%
end: !.container

position: bottom
offset: -50vh
end: !.container

Animation, Show On Up, Media and Target Offset

start: !.container
end: !.container ~ h2
animation: uk-animation-slide-top

end: !.container ~ h2
show-on-up: true
animation: uk-animation-slide-top

end: !.container
media: 640

target-offset: 20
end: !.container ~ h2

Jump to Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Oversized Content

Position Top 1

Position Top 2

Position Top 3

Heading 1

Heading 2

Heading 3

Heading 4

Position Bottom 1

Position Bottom 2

Position Bottom 3

Overflow Flip

overflow-flip: true
end: 100%

Cover previous section.
Reveal next section.

position: bottom
overflow-flip: true
start: -100%
end: 0

JavaScript Options

Option	Value	Default	Description
`position`	String	top	The position the element should be stuck to (top, bottom).
`start`	Length, CSS Selector	0	Start offset. The value can be in vh, % and px. It supports basic mathematics operands + and -. The default value of `0` means that the element's top border and viewport's top border intersect. A CSS Selector will set start to the selected element's bottom border and the elements top border.
`end`	Length, CSS Selector, Boolean	false	End offset. The value can be in vh, % and px. It supports basic mathematics operands + and -. A value of `0` means that the element's top border and viewport's top border intersect, which would cause the element not to be sticky at all if start is also set to `0`. A CSS Selector will set the end to the selected element's bottom and the element's bottom border. `false` will make the element stick until the end of the page. `true` selects the parent element.
`offset`	Length	0	The offset the Sticky should be fixed to. The value can be in vh, % and px. It supports basic mathematics operands + and -.
`overflow-flip`	Boolean	false	Flip the Sticky's position option if the element overflows the viewport and disables overflow scrolling.
`animation`	String	false	The animation to use.
`cls-active`	String	uk-active	The active class.
`cls-inactive`	String		The inactive class.
`sel-target`	CSS Selector	self	The target element to apply active and inactive classes to. Defaults to the element itself.
`show-on-up`	Boolean	false	Only show sticky element when scrolling up.
`media`	Number, String	false	Condition for the active status - a width as integer (e.g. 640) or a breakpoint (e.g. @s, @m, @l, @xl).
`target-offset`	Boolean, Length	false	Initially make sure that the Sticky element is not over a referenced element via the page's location hash. The offset defines by how far the element will be above the referenced element. `false` will disable this behavior.