artboard-deluxe / sticky
sticky()
sticky(
options):ArtboardPluginDefinition<{enabled:boolean;keepVisible:boolean;margin:Margin;origin:Origin;position:Origin| {x:number;y:number; };precision:number;restoreStyles:boolean;target:HTMLElement|Size; }, {getRect: () =>Rectangle; }>
Anchors an element relative to the artboard with a given position, then shifts the element so its origin is at that position and adding margins according to which side of the element is anchored.
Parameters
options
enabled
boolean
Whether the position styles should be applied. Defaults to true.
keepVisible
boolean
If set, the element is always kept visible within the root element's rect.
margin
Margin
The margin to apply after the element's position has been calculated.
Can be a number (for all edges) or an object with separate margins for each edge.
origin
Origin
Defines where the element “anchors” relative to position, similar to how the CSS transform-origin property works.
Defaults to 'top-left'.
position
Origin | { x: number; y: number; }
The position relative to the artboard.
Can be one of the named posistions (such as 'top-left') or an object with x and y coordinates.
Defaults to 'top-left'.
precision
number
How precise the translate3d() values should be.
A value of 1 (default) means the only whole pixels are applied (e.g. 20px). A value of 0.5 means the values are rounded to the next 0.5 increment (e.g. 20.5px or 21px). A value of 10 would round to 20px, 30px, 0px, etc.
Note that internally the offset is kept as a floating point number. The precision only defines how the number is rounded when setting the transform style.
restoreStyles
boolean
Whether to restore the original styles after destroying the plugin instance.
target
HTMLElement | Size
Either a DOM element to make sticky or an object with width and height properties.
If an element is provided the plugin will automatially update the style of the element.
If an object is provided, the plugin will calculate the x and y coordinates based on the provided size. You can obtain these coordinates by calling getRect() on the plugin instance.
Returns
ArtboardPluginDefinition<{ enabled: boolean; keepVisible: boolean; margin: Margin; origin: Origin; position: Origin | { x: number; y: number; }; precision: number; restoreStyles: boolean; target: HTMLElement | Size; }, { getRect: () => Rectangle; }>