# sticky-n-scroll

> An extended behavior for sticky div.

Latest version **0.2.2** (published 2022-04-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install sticky-n-scroll
pnpm add sticky-n-scroll
yarn add sticky-n-scroll
bun add sticky-n-scroll
```

## Health

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

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.2 |
| Published | 2022-04-16 |
| First published | 2021-11-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 16 |
| Unpacked size | 17.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Anh Tu Do |
| Maintainers | doanhtu07 |
| Keywords | react, components, ui |

## Links

- npm: https://www.npmjs.com/package/sticky-n-scroll
- Repository: https://github.com/doanhtu07/StickySideBar
- Homepage: https://github.com/doanhtu07/StickySideBar#readme
- Issues: https://github.com/doanhtu07/StickySideBar/issues
- npm.io page: https://npm.io/package/sticky-n-scroll

## Dependencies (16)

- [react](https://npm.io/package/react.md) ^17.0.2
- [jquery](https://npm.io/package/jquery.md) ^3.6.0
- [react-dom](https://npm.io/package/react-dom.md) ^17.0.2
- [react-jss](https://npm.io/package/react-jss.md) ^10.9.0
- [typescript](https://npm.io/package/typescript.md) ^4.1.2
- [web-vitals](https://npm.io/package/web-vitals.md) ^1.0.1
- [@types/jest](https://npm.io/package/@types/jest.md) ^26.0.15
- [@types/node](https://npm.io/package/@types/node.md) ^12.0.0
- [@types/react](https://npm.io/package/@types/react.md) ^17.0.0
- [@types/jquery](https://npm.io/package/@types/jquery.md) ^3.5.9
- [react-scripts](https://npm.io/package/react-scripts.md) 4.0.3
- [@types/react-dom](https://npm.io/package/@types/react-dom.md) ^17.0.0
- [@types/react-jss](https://npm.io/package/@types/react-jss.md) ^10.0.0
- [@testing-library/react](https://npm.io/package/@testing-library/react.md) ^11.1.0
- [@testing-library/jest-dom](https://npm.io/package/@testing-library/jest-dom.md) ^5.11.4
- [@testing-library/user-event](https://npm.io/package/@testing-library/user-event.md) ^12.1.10

## Alternatives

- [@progress/kendo-ooxml](https://npm.io/package/@progress/kendo-ooxml.md) — 152.1K weekly downloads
- [@progress/kendo-react-ripple](https://npm.io/package/@progress/kendo-react-ripple.md) — 8.0K weekly downloads
- [@progress/kendo-react-orgchart](https://npm.io/package/@progress/kendo-react-orgchart.md) — 4.3K weekly downloads
- [@praxisui/dynamic-fields](https://npm.io/package/@praxisui/dynamic-fields.md) — 2.4K weekly downloads
- [@mesalvo/react-ui](https://npm.io/package/@mesalvo/react-ui.md) — 1.7K weekly downloads

## Recent versions

- 0.2.2 (latest) — 2022-04-16
- 0.2.1 — 2022-02-04
- 0.2.0 — 2022-02-03
- 0.1.6 — 2021-11-26
- 0.1.5 — 2021-11-26
- 0.1.4 — 2021-11-26
- 0.1.3 — 2021-11-26
- 0.1.2 — 2021-11-26
- 0.1.1 — 2021-11-26
- 0.1.0 — 2021-11-26

## README

# StickySideBar

A **React** sticky component that can stick to top when scrolling up and can stick to bottom when scrolling down.

## Support

If you like the project, don't forget to give a star.

If you have any issues, post them on Github.

**Github** | https://github.com/doanhtu07/StickySideBar

Thank you!

## Demo

https://user-images.githubusercontent.com/55064969/143556256-2f143e35-1895-4cd1-9e80-af040c7e1c12.mov

## CodeSandbox Demo

https://codesandbox.io/s/test-sticky-n-scroll-qr1p3

## Setup

`npm install sticky-n-scroll`  

or  

`yarn add sticky-n-scroll`  

## Use in React

```
import StickySideBar from "sticky-n-scroll"

...

class Demo extends React.Components {
  render() 
  {
    return (
      <StickySideBar topSpace={20} bottomSpace{20}>
        <div> 
          Your content 
        </div>
      </StickySideBar>
    )
  }

}
export default Demo;
```  

## Extra Power

Now you can freely manipulate StickySideBar with StickySideBar_ID: `imported { StickySideBar_ID } from "sticky-n-scroll"`

There are 3 main parts of StickySideBar: **Parent**, **Space**, **Content**. These 3 parts are all div with id equals to corresponding StickySideBar_ID values. You can either use jQuery or any DOM manipulations (such as ResizeObserver, etc.) to get to these elements by ids.

## Important Note

In order for StickySideBar to be able to scroll, **Parent** should have larger height than **Content**.

## Props of StickySideBar

| Props                | Type        | Description                                                                                                                 |
| -------------------- | ----------- | --------------------------------------------------------------------------------------------------------------------------- |
| topSpace             | number      | **(in pixels)** Determine how much space between the content's **top** and screen's **top** when scrolling **up**.          |
| bottomSpace          | number      | **(in pixels)** Determine how much space between the content's **bottom** and screen's **bottom** when scrolling **down**.  |
| turnOff (optional)   | boolean     | Turn off sticky mode -> Become a normal div                                                                                 |
| initialSpaceDivHeight (optional) | number | Force initial height of space div when StickySideBar mounts |

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