jQuery Plugin For Sticky List Headers - Yostick

Yostick is a jQuery plugin for creating a simple scrollable listview that sticks the list headers to the top of the webpage when you scroll past them.

How to use it:

1. Create a basic listview following the markup structure as follow.

<div class="yostick">
  <div class="yostick__scroller">
    <article class="yostick__section">
      <h2 class="yostick__section-header">
        <b class="yostick__section-header-in">Title 1</b> 
      </h2>
      <ul class="yostick__list">
        <li class="yostick__list-item">Item 1</li>
        <li class="yostick__list-item">Item 2</li>
        <li class="yostick__list-item">Item 3</li>
      </ul>
    </article>
    <article class="yostick__section">
      <h2 class="yostick__section-header"> 
        <b class="yostick__section-header-in">Title 2</b> 
      </h2>
      <ul class="yostick__list">
        <li class="yostick__list-item">Item 1</li>
        <li class="yostick__list-item">Item 2</li>
        <li class="yostick__list-item">Item 3</li>
      </ul>
    </article>
    <article class="yostick__section">
      <h2 class="yostick__section-header"> 
        <b class="yostick__section-header-in">Title 3</b> 
      </h2>
      <ul class="yostick__list">
        <li class="yostick__list-item">Item 1</li>
        <li class="yostick__list-item">Item 2</li>
        <li class="yostick__list-item">Item 3</li>
      </ul>
    </article>
  </div>
</div>

2. Include jQuery library and the jQuery Yostick plugin at the bottom of the webpage.

<script src="jquery.min.js"></script> 
<script src="dist/yostick.js"></script> 

3. Call the function on the top element and done.

$('.yostick').yostick();

4. Add your own CSS styles to the list view.

.yostick {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.yostick__scroller {
  overflow-y: scroll;
  width: 100%;
  height: 100%;
  background: #fff;
}

.yostick__scroller::-webkit-scrollbar {
  width: 0;
}

.yostick__section { }

.yostick__section-header {
  margin: 0;
  padding: 0;
  height: 30px;
  font: 16px/28px Helvetica, sans-serif;
}

.yostick__section-header-in {
  position: relative;
  display: block;
  box-sizing: border-box;
  margin: 0;
  padding: 2px 10px 0;
  width: 100%;
  height: 30px;
  background: #ddd;
  font-weight: normal;
  user-select: none;
}

.yostick__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.yostick__section._collapsed .yostick__list { display: none; }

.yostick__list-item {
  margin: 0;
  padding: 1px 10px 0;
  border-bottom: 1px solid #efefef;
}

5. Plugin parameters.

// Selectors
scroller: '.yostick__scroller',
section: '.yostick__section',
sectionContent: '.yostick__list',
sectionHeaderWrapper: '.yostick__section-header',
sectionHeader: '.yostick__section-header-in',

// Modifiers
sectionIsCollapsed: '_collapsed',
sectionTitleIsSticked: '_sticked',
sectionTitleIsHustled: '_hustled',

// Options
collapseOnClick: true

Change log:

2015-07-06

• Add check for next

2015-07-01

• Add callback for collapsing

2015-06-24

• Styles should be updated on window resize

---

This awesome jQuery plugin is developed by Chaptykov. For more Advanced Usages, please check the demo page or visit the official website.