StickyHeaders

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

Demo

• Action
• Avengers: Age of Ultron (2015)
• Furious 7 (2015)
• Mission: Impossible - Rogue Nation (2015)
• Kingsman: The Secret Service (2014)
• Batman v Superman: Dawn of Justice (2016)
• Spectre (2015)
• Seventh Son (2014)
• Chappie (2015)
• The Gunman (2015)
• The Transporter Refueled (2015)
• Comedy
• Home (2015)
• Kingsman: The Secret Service (2014)
• Get Hard (2015)
• Focus (2015)
• The Last Man on Earth (2015 TV Series)
• Unbreakable Kimmy Schmidt (2015 TV Series)
• iZombie (2015 TV Series)
• The Big Bang Theory (2007 TV Series)
• Birdman: Or (The Unexpected Virtue of Ignorance) (2014)
• Big Hero 6 (2014)
• Romance
• Cinderella (2015)
• Fifty Shades of Grey (2015)
• Focus (2015)
• Paper Towns (2015)
• The Theory of Everything (2014)
• The Longest Ride (2015)
• Man Up (2015)
• Maleficent (2014)
• Spring (2014)
• The Fault in Our Stars (2014)
• Thriller
• Insurgent (2015)
• Furious 7 (2015)
• Mission: Impossible - Rogue Nation (2015)
• Spectre (2015)
• Divergent (2014)
• Chappie (2015)
• The Gunman (2015)
• The Transporter Refueled (2015)
• Maggie (2015)
• Run All Night (2015)
• Crime
• Furious 7 (2015)
• Kingsman: The Secret Service (2014)
• Focus (2015)
• The Gunman (2015)
• The Transporter Refueled (2015)
• Run All Night (2015)
• Nightcrawler (2014)
• Wild Card (2015)
• The Wolf of Wall Street (2013)
• Fast & Furious 6 (2013)
• Family
• Cinderella (2015)
• Home (2015)
• Big Hero 6 (2014)
• Paddington (2014)
• The SpongeBob Movie: Sponge Out of Water (2015)
• Maleficent (2014)
• Annie (2014)
• Night at the Museum: Secret of the Tomb (2014)
• Max (2015)
• Frozen (2013)
• Horror
• It Follows (2014)
• Maggie (2015)
• Spring (2014)
• Unfriended (2014)
• Backcountry (2014)
• Muck (2015)
• The Lazarus Effect (2015)
• Insidious: Chapter 3 (2015)
• Clown (2014)
• Extraterrestrial (2014)
• Adventure
• Insurgent (2015)
• Cinderella (2015)
• Avengers: Age of Ultron (2015)
• Furious 7 (2015)
• Interstellar (2014)
• Mission: Impossible - Rogue Nation (2015)
• Home (2015)
• Fifty Shades of Grey (2015)
• Kingsman: The Secret Service (2014)
• Mystery
• The Gunman (2015)
• Run All Night (2015)
• Paper Towns (2015)
• Gone Girl (2014)
• The Maze Runner (2014)
• Inherent Vice (2014)
• Inception (2010)
• Tomorrowland (2015)
• Predestination (2014)
• Prisoners (2013)
• Music
• Whiplash (2014)
• Pitch Perfect 2 (2015)
• Pitch Perfect (2012)
• If I Stay (2014)
• Dirty Dancing (1987)
• Magic Mike XXL (2015)
• Straight Outta Compton (2015)
• Amadeus (1984)
• Begin Again (2013)
• Step Up All In (2014)
• Fantasy
• Cinderella (2015)
• Avengers: Age of Ultron (2015)
• Home (2015)
• Batman v Superman: Dawn of Justice (2016)
• Seventh Son (2014)
• Into the Woods (2014)
• The Hobbit: The Battle of the Five Armies (2014)
• Star Wars: Episode VII - The Force Awakens (2015)
• Star Wars: Episode VI - Return of the Jedi (2014)
• The Cobbler (2014)
• Sci-Fi
• Insurgent (2015)
• Avengers: Age of Ultron (2015)
• Interstellar (2014)
• Home (2015)
• Batman v Superman: Dawn of Justice (2016)
• Divergent (2014)
• Chappie (2015)
• Big Hero 6 (2014)
• The Hunger Games: Mockingjay - Part 1 (2014)
• Guardians of the Galaxy (2014)
• War
• The Imitation Game (2014)
• Unbroken (2014)
• The Water Diviner (2014)
• American Sniper (2014)
• Fury (2014)
• Inglourious Basterds (2009)
• Dracula Untold (2014)
• Saving Private Ryan (1998)
• Lone Survivor (2013)
• Atonement (2007)
• Animation
• Home (2015)
• Big Hero 6 (2014)
• The SpongeBob Movie: Sponge Out of Water (2015)
• Frozen (2013)
• How to Train Your Dragon 2 (2014)
• The Book of Life (2014)
• Penguins of Madagascar (2014)
• Hotel Transylvania 2 (2015)
• Inside Out (2015)
• The Lego Movie (2014)
• Sport
• Unbroken (2014)
• Foxcatcher (2014)
• McFarland, USA (2015)
• Rush (2013)
• Warrior (2011)
• Talladega Nights: The Ballad of Ricky Bobby (2006)
• Remember the Titans (2000)
• A League of Their Own (1992)
• Never Back Down (2008)
• Cars (2006)

Browser Compatibility

• IE 10+
• Firefox 35+
• Chrome 36+
• Opera 27+
• Safari 7.1+

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.