Skip to content

Commit 50e6bc3

Browse files
committed
chore: update README.md
1 parent 7accd08 commit 50e6bc3

File tree

1 file changed

+22
-27
lines changed

1 file changed

+22
-27
lines changed

README.md

Lines changed: 22 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,29 @@
11
# FloatSidebar.js
2+
23
[![NPM version](https://img.shields.io/npm/v/float-sidebar.svg?style=flat)](https://www.npmjs.org/package/float-sidebar)
34

4-
> A lightweight (2kb gzipped), zero-dependency javascript library for making a sidebar float.
5+
> A lightweight (2kb gzipped), zero-dependency JavaScript library that makes sidebars float.
56
67
[Demo](https://js-2sy9en.stackblitz.io)
78

8-
FloatSidebar.js is a vanilla javascript library that can be used to make a sidebar float, so it would automatically stick to the top or bottom of the viewport depending on the scroll direction until the beginning or end of the content is reached.
9-
10-
The library supports two strategies which activate depending on the sidebar's height:
9+
FloatSidebar.js is a lightweight JavaScript library that creates sticky, floating sidebars. It keeps the sidebar visible in the viewport by dynamically sticking it to the top or bottom based on scroll direction and sidebar height.
1110

12-
1. When the sidebar's height > the viewport height, the sidebar sticks to the viewport bottom when scrolling down, and to the viewport top when scrolling up _(see the left sidebar on the video)_.
13-
2. When the sidebar's height < the viewport height, the sidebar sticks to the viewport top _(see the right sidebar on the video)_.
11+
1. Tall Sidebars (taller than the viewport), scrolls with the content, sticking to the bottom when scrolling down and to the top when scrolling up. _(see the left sidebar in the video)_.
12+
2. Short Sidebars (shorter than the viewport): Stays fixed at the top during scrolling. _(see the right sidebar in the video)_.
1413

1514
https://user-images.githubusercontent.com/5039436/164990489-0424b5ab-c231-4f5c-bc1b-fc3f9594e347.mov
1615

17-
1816
## Install
1917

2018
```bash
2119
npm install float-sidebar --save
2220
```
21+
2322
or
23+
2424
```bash
2525
yarn add float-sidebar
2626
```
27-
or
28-
```html
29-
<script src="./path/to/float-sidebar.min.js"></script>
30-
```
3127

3228
## Usage
3329

@@ -48,7 +44,7 @@ or
4844
```css
4945
.wrapper {
5046
display: flex;
51-
/* Required in case of using an infinite scroll */
47+
/* Required when using infinite scroll */
5248
align-items: flex-start;
5349
}
5450

@@ -64,14 +60,14 @@ or
6460
```javascript
6561
import FloatSidebar from 'float-sidebar';
6662

67-
const sidebar = document.querySelector('.sidebar');
63+
const sidebar = document.querySelector('.sidebar');
6864
const relative = document.querySelector('.content');
6965

7066
const floatSidebar = FloatSidebar({
7167
sidebar,
7268
relative,
7369
topSpacing: 20,
74-
bottomSpacing: 20
70+
bottomSpacing: 20,
7571
});
7672

7773
// ...
@@ -85,22 +81,21 @@ floatSidebar.destroy();
8581

8682
## Options
8783

88-
| Name | Type | Default | Description |
89-
|:------------- |:------------- |:--------------------------- | ---------------- |
90-
| sidebar | `HTMLElement` | Required | The sidebar element |
91-
| relative | `HTMLElement` | Required | The sidebar relative element, e.g. the main content |
92-
| viewport | `HTMLElement` | `window` | The viewport element |
93-
| sidebarInner | `HTMLElement` | `sidebar.firstElementChild` | The sidebar inner element |
94-
| topSpacing | `number` | `0` | The space from the top of the viewport. It is used when the sidebar is fixed. |
95-
| bottomSpacing | `number` | `0` | The space from the bottom of the viewport. It is used when the sidebar is fixed. |
84+
| Name | Type | Default | Description |
85+
| :------------ | :------------ | :-------------------------- | ----------------------------------------------------------------------------------- |
86+
| sidebar | `HTMLElement` | Required | The sidebar element |
87+
| relative | `HTMLElement` | Required | The sidebar relative element, e.g. the main content |
88+
| viewport | `HTMLElement` | `window` | The viewport element |
89+
| sidebarInner | `HTMLElement` | `sidebar.firstElementChild` | The sidebar inner element |
90+
| topSpacing | `number` | `0` | The space from the top of the viewport. Used when the sidebar is in fixed state. |
91+
| bottomSpacing | `number` | `0` | The space from the bottom of the viewport. Used when the sidebar is in fixed state. |
9692

9793
## Instance API
9894

99-
| Method | Description |
100-
|:------------- |:------------- |
101-
| forceUpdate() | Recalculates all the dimensions and finally updates the position of the sidebar. |
102-
| destroy() | Disposes the DOM listeners. |
103-
95+
| Method | Description |
96+
| :------------ | :------------------------------------------------------------- |
97+
| forceUpdate() | Recalculates the dimensions and updates the sidebar's position |
98+
| destroy() | Cleans up DOM references and listeners |
10499

105100
## Similar libraries
106101

0 commit comments

Comments
 (0)