artboard-deluxe

Appearance

artboard-deluxe / sticky

sticky() ​

const 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; }>

Defined in: plugins/sticky/index.ts:29

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; }>