Stickyheaders NPM

StickyHeaders

A JS library which enables sticky section headers in a scrollable list view.

Browser Compatibility

IE 10+
Firefox 35+
Chrome 36+
Opera 27+

API

StickyHeaders has a single instance option to pass during initialization.

Instance Options

headerSelector (string) required - a selector targeting header elements within the list

Usage

Using StickyHeaders is really simple. It has a pure JavaScript API, plus an optional jQuery plugin.

Vanilla JS

Include the widget on the page.

<!DOCTYPE html>
<html>
  <head>
    <script src="dist/scripts/stickyheaders.min.js"></script>
    <link rel="stylesheet" href="dist/styles/stickyheaders.min.css">
  </head>
</html>

Initialize the widget on the list element.

var list = new StickyHeaders(document.getElementById('movies'), {
  headerSelector: '.movies-genre'
});

jQuery

Include the widget on the page.

<!DOCTYPE html>
<html>
  <head>
    <script src="dist/scripts/stickyheaders.jquery.min.js"></script>
    <link rel="stylesheet" href="dist/styles/stickyheaders.min.css">
  </head>
</html>

Initialize the widget on the list element.

$('movies').stickyHeaders({
  headerSelector: '.movies-genre'
});

##Build StickyHeaders uses npm, bower and gulp.

Initialize the dependencies:

npm install
bower install

Build the project:

gulp

The results will appear in the dist directory.

@everything-registry/sub-chunk-2827 @infinitebrahmanuniverse/nolb-sti patternlab-eq-web

1.1.0

11 years ago

1.0.0

11 years ago