vue-comps-scrollspy v1.0.0

vue-comps-scrollspy

Tracks, which element is currently in the viewport

Demo

On scrolling down, the target with the most area filling the space in the range 0.3-0.4 * viewportHeight is set active.
On scrolling up, the range 0.6-0.7 * viewportHeight is taken.

Install

npm install --save-dev vue-comps-scrollspy

or include build/bundle.js.

Usage

# in your component
components:
  "scrollspy": require("vue-comps-scrollspy")
  "scrollspy-item": require("vue-comps-scrollspy/scrollspy-item")
# or, when using bundle.js
components:
  "scrollspy": window.vueComps.scrollspy
  "scrollspy-item": window.vueComps.scrollspyItem

<scrollspy>
  <scrollspy-item target="someID">someDescription</scrollspy-item>
</scrollspy>

For examples see dev/.

Props

Scrollspy

Scrollspy-item

Transition

This is the default transition:

function (scrollBy, done) {
  window.scrollBy(0,scrollBy)

}

Always make sure you apply a little timeout before calling done

Example of vue-materialize for a transition with velocity:

Velocity = require("velocity-animate")
function (scrollBy, done) {
  var body = document.body
  var docEl = document.documentElement
  var scrollTop = window.pageYOffset || docEl.scrollTop || body.scrollTop
  scrollTop += scrollBy
  var duration = Math.abs(scrollBy)/3
  if (duration < 100) {
    duration = 100
  } else if (duration > 500) {
    duration = 500
  }
  Velocity(docEl, "scroll", {
    duration: duration,
    offset: scrollTop,
    complete: function() {setTimeout(done, 66)}
  })
}

Changelog

• 1.0.0
  some cleaning
  added unit tests
  added transition, activeClass, activeStyle props
  added ability to directly give a element as target

Development

Clone repository.

npm install
npm run dev

Browse to http://localhost:8080/.

License

Copyright (c) 2016 Paul Pflugradt Licensed under the MIT license.