Makes simple to highlight a menu item with an 'active' class as you scroll

npm install --save-dev vue-scrollactive

var Scrollactive = require('vue-scrollactive');
Vue.use(Scrollactive);

<scrollactive ref="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>

<scrollactive ref="scrollactive" class="my-nav" v-on:itemchanged="yourFunction()">
    <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>

methods: {
    dynamicItemsFunction() {
        // Add your items
        this.$refs.scrollactive.setScrollactiveItems();
    }
}

<scrollactive
	active-class="active"
	:offset="80"
	:duration="800"
	bezier-easing-value=".5,0,.35,1">
</scrollactive>

/**
 * Class that will be applied in the menu item.
 *
 * @default  'is-active'
 * @type {String}
 */
activeClass: {
	type: String,
	default: 'is-active'
},

/**
 * Amount of space between top of screen and the section to
 * highlight. (Usually your fixed header's height)
 *
 * @default 20
 * @type {Number}
 */
offset: {
	type: Number,
	default: 20
},

/**
 * Enables/disables the scrolling when clicking in a menu item.
 * Disable if you'd like to handle the scrolling by your own.
 *
 * @default true
 * @type {Boolean}
 */
clickToScroll: {
	type: Boolean,
	default: true
},

/**
 * The duration (milliseconds) of the scroll animation when clicking to scroll
 * is activated.
 *
 * @default 600
 * @type {Number}
 */
duration: {
	type: Number,
	default: 600
},

/**
 * Defines if the plugin should track the section change when
 * clicking an item to scroll to its section. If set to true,
 * it will always keep track and change the active class to the
 * current section while scrolling, if false, the active class
 * will be immediately applied to the clicked menu item, ignoring
 * the passed sections until the scrolling is over.
 *
 * @default false
 * @type {Boolean}
 */
alwaysTrack: {
	type: Boolean,
	default: false
},

/**
 * Your custom easing value for the click to scroll functionality.
 * It must be a string with 4 values separated by commas in a
 * cubic bezier format.
 *
 * @default '.5,0,.35,1'
 * @type {String}
 */
bezierEasingValue: {
	type: String,
	default: '.5,0,.35,1'
}