Get an elements offset relative to viewport for top, left and bottom. Useful for positioning fixed elements to a set position in the viewport when css position sticky isn't enough.
Parameters:
| Name | Type | Description |
|---|---|---|
element | HTMLElement | The element to get coordinates for. |
- Since
- 1.0.0
- Source
Returns:
An object containing top, left and bottom values for an elements position in viewport.
- Type:
- object
Example
import { getCoords } from "@gravityforms/utils";
function Example() {
const adminBar = document.getElementById( 'wpadminbar' );
const barOffset = adminBar ? adminBar.offsetHeight : 0;
const offset = getCoords( exampleHTMLElement );
exampleHTMLElement.style.top = `${ offset.top - barOffset }px`;
exampleHTMLElement.style.left = `${ offset.left }px`;
}