<commit_before># Highlight your menu items as you scroll
This vue 2 component makes it simple to highlight a menu item with an 'active' class as you scroll.

 - Highlights menu items as you scroll
 - Scrolls to item's section on click
 - Customizable easing for scrolling on click
 - Vue2
 - Uses pure JS!

Check the <a href="https://eddiemf.github.io/vue-scrollactive/examples/example-1.html">demo</a>!

Other <a href="https://eddiemf.github.io/vue-scrollactive/examples/example-2.html">demo</a> with some custom configuration.

## Installation
Install via npm and use it as a vue plugin in your app.

```bash
npm install --save-dev vue-scrollactive
```
```js
var Scrollactive = require('vue-scrollactive');
Vue.use(Scrollactive);
```

## Usage
You should wrap your menu in a `<scrollactive>` tag (which will be your nav) and add a `.scrollactive-item` class in your `<a>` tags as I show in the example below:

```html
<scrollactive class="my-nav">
    <a href="#home" class="scrollactive-item">Home</a>
    <a href="#about-us" class="scrollactive-item">About Us</a>
    <a href="#portfolio" class="scrollactive-item">Portfolio</a>
    <a href="#contact" class="scrollactive-item">Contact</a>
</scrollactive><commit_msg>Updated demo text<commit_after># Highlight your menu items as you scroll
This vue 2 component makes it simple to highlight a menu item with an 'active' class as you scroll.

 - Highlights menu items as you scroll
 - Scrolls to item's section on click
 - Customizable easing for scrolling on click
 - Vue2
 - Uses pure JS!

Make sure to check the <a href="https://eddiemf.github.io/vue-scrollactive/examples/example-1.html">demo</a> and see all the available options!

## Installation
Install via npm and use it as a vue plugin in your app.

```bash
npm install --save-dev vue-scrollactive
```
```js
var Scrollactive = require('vue-scrollactive');
Vue.use(Scrollactive);
```

## Usage
You should wrap your menu in a `<scrollactive>` tag (which will be your nav) and add a `.scrollactive-item` class in your `<a>` tags as I show in the example below:

```html
<scrollactive class="my-nav">
    <a href="#home" class="scrollactive-item">Home</a>
    <a href="#about-us" class="scrollactive-item">About Us</a>
    <a href="#portfolio" class="scrollactive-item">Portfolio</a>
    <a href="#contact" class="scrollactive-item">Contact</a>
</scrollactive>
{'fraction_non_alphanumeric': 0.13175675675675674, 'fraction_numerical': 0.0029560810810810812, 'mean_word_length': 4.535046728971962, 'pattern_counts': {'":': 0, '<': 33, '<?xml version=': 0, '>': 33, 'https://': 3, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2667007', 'n_tokens_mistral': 758, 'n_tokens_neox': 720, 'n_words': 267}