# scrollspyy-js
---
A lightweight, dependency-free JavaScript library for creating smooth scrollspy effects
with customizable active states for navigation links.
---
### Features
- Pure Vanilla JavaScript: No jQuery or other dependencies required.
- Lightweight: Minimal footprint for optimal performance.
- Easy Integration: Simple initialization with one function call.
- Highly Customizable: Full control over colors, fonts, and visual effects.
- Dynamic Styling: Applies styles with !important to ensure visibility.
- Smooth Transitions: Automatically highlights navigation based on scroll position.
- Framework Agnostic: Works with any HTML/CSS framework.
- CDN Ready: Use directly from a CDN without installation.
---
## Installation
### NPM
```bash
npm install scrollspyy-js
```
Then include in your HTML:
```html
```
### CDN
##### Using jsDelivr
```html
```
---
##### Using unpkg
```html
```
---
## Initialize Scrollspy
```html
```
---
## Quick Start
Basic HTML Setup
```html
ScrollSpy Example
Home Section
About Section
Services Section
Contact Section
```
---
## LIVE DEMO
Want to see it in action? Check out the live CodePen example.
Link to CodePen: https://codepen.io/razorzero0/pen/OPyzrJb
---
## Configuration Options
Pass these options to scrollSpy.init() to customize the behavior and appearance.
| Parameter | Type | Default | Description |
|---|---|---|---|
| `sectionSelector` | String | `"section"` | CSS selector for content sections to track. Each section must have an ID attribute. |
| `navSelector` | String | `".nav-link"` | CSS selector for navigation links. The `href` attribute must point to section IDs (e.g., `#home`). |
| `padding` | Number | `5` | Padding (in pixels) applied to active navigation links. |
| `borderRadius` | String | `"5px"` | Border radius for the active link background. Accepts any valid CSS border-radius value. |
| `offset` | Number | `150` | Scroll offset (in pixels) for triggering active state. Useful for fixed headers. |
| `activeClass` | String | `"active-scrollspy"` | CSS class name added to active navigation links. |
| `bgColor` | String | `""` | Background color for active links. Accepts any valid CSS color value. |
| `textColor` | String | `"#59110cff"` | Text color for active links. Accepts any valid CSS color value. |
| `fontWeight` | String | `"bolder"` | Font weight for active links (e.g., `"normal"`, `"bold"`, `"600"`). |
| `underline` | Boolean | `false` | Enable/disable underline effect on active links. |
| `underlineColor` | String | `"blue"` | Color of the underline when enabled. |
| `underlineOffset` | String | `"2px"` | Distance between text and underline. |
---
## Advanced Examples
#### Example 1: Custom Styled Navigation
```JAVASCRIPT
scrollSpy.init({
sectionSelector: ".content-section",
navSelector: ".sidebar-nav a",
padding: 10,
borderRadius: "25px",
offset: 100,
bgColor: "#c4f622ff",
textColor: "#ffffff",
fontWeight: "600",
underline: false
});
```
#### Example 2: Minimal Configuration
```JAVASCRIPT
scrollSpy.init({
bgColor: "#007bff",
textColor: "#fff"
});
```
#### Example 3: With Underline Effect
```javascript
scrollSpy.init({
bgColor: "transparent",
textColor: "#e91e63",
fontWeight: "bold",
underline: true,
underlineColor: "#e91e63",
underlineOffset: "4px"
});
```
#### Example 4: For Fixed Header
```JAVASCRIPT
// If you have a 80px fixed header
scrollSpy.init({
offset: 80,
bgColor: "#28a745",
textColor: "#fff",
borderRadius: "0px"
});
```
---
### API Methods
`scrollSpy.init(options)`
Initializes the scrollspy functionality with the provided options.
##### Parameters:
options (Object): A configuration object with properties from the table above.
Returns: `void`
Example:
```javascript
scrollSpy.init({
bgColor: "#6c757d",
textColor: "#fff"
});
```
---
### Browser Support
- Chrome
- Firefox
- Safari
- Edge
- Opera
- Internet Explorer 11 (with polyfills)
---
### Common Use Cases
- **Single Page Applications**: Perfect for SPAs with multiple sections and fixed navigation.
- **Documentation Sites:** Ideal for documentation with sidebar navigation showing the user's current position.
- **Landing Pages:** Great for marketing pages with smooth scroll navigation.
- **Portfolio Websites**: Excellent for portfolio sites with section-based content.
---
### Troubleshooting
#### Issue: Active state not showing
- **Solution:** Ensure your navigation links have the correct `href `pointing to section IDs.
- Check that sections have unique `id` attributes.
- Verify the `navSelector` matches your navigation links.
#### Issue: Wrong section highlighted
- **Solution:** Adjust the `offset `value to match your layout.
- Check if sections have sufficient height to allow the scrollspy to trigger correctly.
#### Issue: Styles not applying
- **Solution:** The library uses` !important` to override existing styles.
- Check the browser console for any JavaScript errors.
- Ensure the script is loaded after the DOM content.
### License
**MIT License** - Feel free to use in personal and commercial projects.
### Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
### Support
For issues and feature requests, please create an issue on the GitHub repository.