Description
The sticky element widget aids navigation, by causing elements to automatically stick to the browwer window when they would otherwise be off-screen due to scrolling. This is a UI concept that is particularly useful for toolbars.
Usage
The widget key attribute should be specified on the element that will become 'sticky'.
<div id='elWrapper'> <div id='elStickyElement' data-ipsSticky> ... </div> </div>
The wrapper element represents the element that will visually contain the sticky element. The widget by default simply uses the sticky element's parent.
The widget attempts to position and size the element when it is 'sticky' correctly, but depending on the situation in which it is used, manual tweaking via CSS may be required.
Options
stickyClass
(String; optional; default 'ipsSticky')
Classname that will be applied to the element when it is in sticky mode. Useful for applying special styling which indicates it is 'floating'.
relativeTo
(Selector; optional)
The element which visually appears as the parent of the sticky element. The sticky element's parent is assumed if not specified.
This option keeps the sticky element within the container specified by relativeTo. As an example, assume you have a sticky element within a sidebar on your page, and the relativeTo option is set to the sidebar. As the user scrolls down the page, the sticky element will remain visible, 'stuck' to the top of the browser window. However, if the amount of sidebar shown on the page isn't enough to contain all of the sticky element, the widget will unsticky it. This behavior allows sticky elements to intelligently behave as children of other elements that aren't themselves sticky.
spacing
(Number; optional; default 0)
Number in pixels. When the sticky element is the specified distance from the edge of the browser window, it will be switched into it's sticky positioning.
stickTo
(String; optional; default 'top')
Either top or bottom; determines which edge of the screen the sticky element will stick to.
width
(Mixed; optional)
Allows you to specify the width of the sticky element when it is in sticky mode. This option can be a Number, in which case it will be set to that number of pixels. It can also be a selector, in which case it will be set to the same width of the first element located by the selector.
disableIn
(String; optional)
Sticky behavior is often not desired on mobile devices. This option allows you to disable sticky behavior when responsiveness is enabled and the device is currently using one of the viewport keys specified in this option, e.g. phone or tablet.
Events emitted by ips.ui.sticky
Events are emitted on the element on which the data-ipsWidget attribute is specified.
stickyInit
Emitted after the widget has been initialized.
Event data:
-
id
ID of the root sticky element -
status
The current status of the sticky element, either normal or fixed
Report Guide