Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tflx/scroll-spy
A component that will highlight navigation links when the corresponding article anchor is in view
https://github.com/tflx/scroll-spy
Last synced: about 6 hours ago
JSON representation
A component that will highlight navigation links when the corresponding article anchor is in view
- Host: GitHub
- URL: https://github.com/tflx/scroll-spy
- Owner: tflx
- Created: 2024-01-26T11:53:06.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2024-01-29T08:33:33.000Z (12 months ago)
- Last Synced: 2025-01-17T06:35:04.172Z (5 days ago)
- Language: TypeScript
- Size: 1.81 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ScrollSpy Web Component
`scroll-spy` is a custom web component that highlights navigation links when the corresponding section is in view.
[See demo](https://tflx.github.io/scroll-spy/)
## Usage
First, import the `scroll-spy` component in your JavaScript or TypeScript file:
```javascript
import 'scroll-spy';
```
Then, you can use the `scroll-spy` component in your HTML:
```html
Lorem Ipsum
…
Sed Diam
…
Cras Tristique
…
Aliquam In
…
Phasellus Elit
…
```
## Attributes
| Attribute | Description | Default Value |
|-----------------------|-----------------------------------------------------------------------------------------------|-----------------|
| `scrollTarget` | The query selector that targets the article element containing the sections to be observed. Must be unique. | 'article' |
| `anchorElements` | The query selector that targets the navigation links. | 'a' |
| `activeClass` | The class that will be added to the active navigation link. | 'active' |
| `sectionAttribute` | The attribute used to find the sections that will be observed. | 'id' |
| `viewportTriggerPoint`| The point at which the navigation links should be active, specified as a gsap ScrollTrigger value. (Read below) | 'top top' |
## Viewport trigger point
https://gsap.com/docs/v3/Plugins/ScrollTrigger/
_From the documentation:_
Describes a place on the trigger and a place on the scroller that must meet in order to start the ScrollTrigger. So, for example, "top center" means "when the top of the trigger hits the center of the scroller" (and the scroller is the viewport by default). "bottom 80%" means "when the bottom of the trigger hits 80% down from the top of the viewport" (assuming vertical scroll). You can use keywords like "top", "bottom", "center" (or "left" and "right" if horizontal: true) or percentages like "80%" or pixel values like "100px". Percentages and pixels are always relative to the top/left of the element/scroller. You can even use a complex relative value like "top bottom-=100px" which means "when the top of the trigger hits 100px above the bottom of the viewport/scroller"
## Example
```html
Lorem Ipsum
…
Sed Diam
…
Cras Tristique
…
Aliquam In
…
Phasellus Elit
…
```
In this example, when each section is at the top of the viewport (minus 50px), the corresponding link will have the `myActiveClass` class added to it.