# @schptr/stickjs

> If position sticky is not working i got you

Latest version **0.9.1** (published 2023-03-20) · MIT license · 0 weekly downloads

## Install

```sh
npm install @schptr/stickjs
pnpm add @schptr/stickjs
yarn add @schptr/stickjs
bun add @schptr/stickjs
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.9.1 |
| Published | 2023-03-20 |
| First published | 2023-03-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 9.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Petr Suchanek |
| Maintainers | trilmatic |
| Keywords | sticky, scroll, position-sticky |

## Links

- npm: https://www.npmjs.com/package/@schptr/stickjs
- Repository: https://github.com/Trilmatic/stickjs
- Homepage: https://github.com/Trilmatic/stickjs#readme
- Issues: https://github.com/Trilmatic/stickjs/issues
- npm.io page: https://npm.io/package/@schptr/stickjs

## Dependencies (1)

- [jest-environment-jsdom](https://npm.io/package/jest-environment-jsdom.md) ^29.5.0

## Recent versions

- 0.9.1 (latest) — 2023-03-20
- 0.9.0 — 2023-03-19

## README

# STICKJS

Do you find css sticky position annoying? If yes we are on the same boat, this small package will programically add sticky functionality through plain javascript to your desired element and even a little bit more.

## Usage

Install as an npm package

```shell
npm install @schptr/stickjs
```

Import the functions that you need

```js
import { isSticky } from "@schptr/stickjs";
```

Import css

```js
import "@schptr/stickjs/src/stick.css";
```

or add snipet below to your css files

```css
.is-sticky {
  position: fixed;
  top: var(--offsetTOP);
  left: var(--offsetLEFT);
  right: var(--offsetRIGHT);
  bottom: var(--offsetBOTTOM);
}
```

Initialize on an given element or id

```js
import { isSticky } from "@schptr/stickjs"; //Import function

let options = { direction: "bottom", offset: 50 }; //Define options
let element = document.getElementById("sticky-element"); //Define element

isSticky(element, options); //Initialize stickyjs
```

## Use cases

- Making element sticky in any given direction
- Offsetting a sticky element to match gaps, paddings or margins
- Checking if elements are in viewport
- Highlighting element if different element is in viewport

## Options

```js
{
    direction: "top",
    offset: 0,
    viewport: 0,
    keepWidth: true,
    keepHeight: true,
}
```

### direction

direction in which element will stick - "top", "bottom", "left", "right".  
Default:

```js
"top";
```

### offset

If we do not want element to stick exactly on screen end in given direction we can set an offset in pixels.  
Default:

```js
0;
```

### viewport

sometimes we do not want the element to stick on devices with lower resosution, viewport is the least ammount of pixels of width that trigger sticky behaviour. If the viewer width is less then given number, element will not stick.  
Default:

```js
0;
```

### keepWidth

If we need the element to keep exact width after sticking set it to true.  
Default:

```js
true;
```

### keepHeight

If we need the element to keep exact height after sticking set it to true.  
Default:

```js
true;
```

## Functions

### isSticky

parameters:

```
target (element or id), options
```

initializes sthe script on given element or id with passed or default options, returns void

### isOverOffset

prameters:

```
target (element), anchor and options
```

returns true if element is over offset and sticky behaviour should be triggered

### stick

parameters:

```
target (element), options
```

makes element sticky by adding class, makes sure width and height are kept as position property is changed if needed, returns void

### unstick

parameters:

```
target (element), options
```

removes sticky behaviour from element

### inYViewport

parameters:

```
target (element)
```

return true when element is in Y viewport (visible on screen)

### inXViewport

parameters:

```
target (element)
```

return true when element is in X viewport (visible on screen)

### activeIfInViewport

parameters:

```
target (element), isXAxis (default false), activeClass (default "active")
```

adds an class to target if in viewport, set isXAxis to true if you need to check for X axis instead of Y

### activeIfOtherInViewport

parameters:

```
target (element), other (element), isXAxis (default false), activeClass (default "active")
```

adds an class to target if other element is in viewport, set isXAxis to true if you need to check for X axis instead of Y

## Browser compatibility

Stickjs is supported by all of the modern browsers. The least compatible are css variables that are still widely supported, [more on that topic here](https://caniuse.com/css-variables)

## Testing

```console
npm run test
```

---
_Source: https://npm.io/package/@schptr/stickjs · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._