ssense / vue-scroll-magnet

Wrappers for Vue components which follow the viewport while scrolling within the bounds of their parent container

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