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": windowvueCompsscrollspy "scrollspy-item": windowvueCompsscrollspyItem
someDescription
For examples see dev/
.
Props
Scrollspy
Name | type | default | description |
---|---|---|---|
transition | Function | see transtion | function which gets used for scrolling item into view |
activeClass | String | active |
class will be applied to active item |
activeStyle | String / Object | "" | style will be applied to active item |
Scrollspy-item
Name | type | default | description |
---|---|---|---|
target | String or Element | - | string will be converted by document.getElementById |
Transition
This is the default transition:
{ window }
Always make sure you apply a little timeout before calling done
Example of vue-materialize
for a transition with velocity:
Velocity = { var body = documentbody var docEl = documentdocumentElement var scrollTop = windowpageYOffset || docElscrollTop || bodyscrollTop scrollTop += scrollBy var duration = Math/3 if duration < 100 duration = 100 else if duration > 500 duration = 500 }
Changelog
- 1.0.0
some cleaning
added unit tests
addedtransition
,activeClass
,activeStyle
props
added ability to directly give a element as target
Development
Clone repository.
npm installnpm run dev
Browse to http://localhost:8080/
.
License
Copyright (c) 2016 Paul Pflugradt Licensed under the MIT license.