vue-scroll-magnet
v0.3.7
Published
Wrappers for Vue components which follow the viewport while scrolling within the bounds of their parent container
Downloads
231
Readme
vue-scroll-magnet
What is Vue Scroll Magnet?
Vue Scroll Magnet is a pair of component wrappers which allow elements to follow the viewport while scrolling and then anchor at the upper and lower extremeties of their parent container. This module is inspired by a jQuery plugin called Sticky kit.
Installation
This component relies on ES6 and may not be compatible with Vue 1.x projects.
npm install -S vue-scroll-magnet
Usage (Global)
Install the components globally:
import Vue from 'vue';
import VueScrollMagnet from 'vue-scroll-magnet';
Vue.use(VueScrollMagnet);
Usage (Component)
Include the wrappers into your component using import:
/* inside your Vue component's script tag */
import { ScrollMagnetContainer, ScrollMagnetItem } from 'vue-scroll-magnet';
export default {
...
components: {
ScrollMagnetContainer,
ScrollMagnetItem
}
...
};
HTML structure
The scrollable height boundary will be determined as the direct parent of the <scroll-magnet-container> by default, however it can be configured using an element selector which it can use as a fixed context.
In the example below, <scroll-magnet-container> will automatically use the top of #app as its upper boundary and its height of 500px as its lower boundary unless a specific element context is provided.
<div id="app" style="height: 500px;">
<scroll-magnet-container>
<scroll-magnet-item>This content will scroll</scroll-magnet-item>
</scroll-magnet-container>
</div>
Tests
To run unit tests & code coverage:
npm test