star Bemat Admin Exclusive Premium Plugin

Subheaders are special list tiles that delineate distinct sections of a list or grid list and are typically related to the current filtering or sorting criteria.

Initializing

To work with subheader lists, you must initialize the jquery.subheader.js by calling the init method, or using the data-toggle="subheader" attribute.

$(".subheader-list-demo").subheader();

Subheader Sticky

Upon scrolling, subheaders remain pinned to the top of the screen until pushed on or off screen by the next subheader.

Examples:

Sticky Subheader 1
  • Avatar

    Peter Carlsson

  • Avatar

    Trevor Hansen

  • Avatar

    Peter Carlsson

  • Avatar

    Trevor Hansen

Sticky Subheader 2
  • Avatar

    Peter Carlsson

  • Avatar

    Trevor Hansen

  • Avatar

    Peter Carlsson

  • Avatar

    Trevor Hansen

Sticky Subheader 3
  • Avatar

    Peter Carlsson

  • Avatar

    Trevor Hansen

  • Avatar

    Peter Carlsson

  • Avatar

    Trevor Hansen

HTML Code:

<div class="subheader-list-demo" data-class="height-4">
	<section>
		<div class="list-subheader" data-mode="sticky">Sticky Subheader 1</div>
		<ul class="list">
			<li class="list-item list-1-line">
				<img src="img/avatar.png" class="list-avatar" alt="Avatar">
				<div class="list-item-text layout-column">
					<h3>Peter Carlsson</h3>
				</div>
				<button type="button" class="secondary-container btn btn-default btn-icon-toggle"><i class="material-icons">chat_bubble</i></button>
			</li>
			<li class="list-item list-1-line">
				<img src="img/avatar.png" class="list-avatar" alt="Avatar">
				<div class="list-item-text layout-column">
					<h3>Trevor Hansen</h3>
				</div>
				<button type="button" class="secondary-container btn btn-default btn-icon-toggle"><i class="material-icons">chat_bubble</i></button>
			</li>
			<li class="list-item list-1-line">
				<img src="img/avatar.png" class="list-avatar" alt="Avatar">
				<div class="list-item-text layout-column">
					<h3>Peter Carlsson</h3>
				</div>
				<button type="button" class="secondary-container btn btn-default btn-icon-toggle"><i class="material-icons">chat_bubble</i></button>
			</li>
			<li class="list-item list-1-line">
				<img src="img/avatar.png" class="list-avatar" alt="Avatar">
				<div class="list-item-text layout-column">
					<h3>Trevor Hansen</h3>
				</div>
				<button type="button" class="secondary-container btn btn-default btn-icon-toggle"><i class="material-icons">chat_bubble</i></button>
			</li>
		</ul>
	</section>	
	<section>
		<div class="list-subheader" data-mode="sticky">Sticky Subheader 2</div>
		<ul class="list">
			<li class="list-item list-1-line">
				<img src="img/avatar.png" class="list-avatar" alt="Avatar">
				<div class="list-item-text layout-column">
					<h3>Peter Carlsson</h3>
				</div>
				<button type="button" class="secondary-container btn btn-default btn-icon-toggle"><i class="material-icons">chat_bubble</i></button>
			</li>
			<li class="list-item list-1-line">
				<img src="img/avatar.png" class="list-avatar" alt="Avatar">
				<div class="list-item-text layout-column">
					<h3>Trevor Hansen</h3>
				</div>
				<button type="button" class="secondary-container btn btn-default btn-icon-toggle"><i class="material-icons">chat_bubble</i></button>
			</li>
			<li class="list-item list-1-line">
				<img src="img/avatar.png" class="list-avatar" alt="Avatar">
				<div class="list-item-text layout-column">
					<h3>Peter Carlsson</h3>
				</div>
				<button type="button" class="secondary-container btn btn-default btn-icon-toggle"><i class="material-icons">chat_bubble</i></button>
			</li>
			<li class="list-item list-1-line">
				<img src="img/avatar.png" class="list-avatar" alt="Avatar">
				<div class="list-item-text layout-column">
					<h3>Trevor Hansen</h3>
				</div>
				<button type="button" class="secondary-container btn btn-default btn-icon-toggle"><i class="material-icons">chat_bubble</i></button>
			</li>
		</ul>
	</section>
	<section>
		<div class="list-subheader" data-mode="sticky">Sticky Subheader 3</div>
		<ul class="list">
			<li class="list-item list-1-line">
				<img src="img/avatar.png" class="list-avatar" alt="Avatar">
				<div class="list-item-text layout-column">
					<h3>Peter Carlsson</h3>
				</div>
				<button type="button" class="secondary-container btn btn-default btn-icon-toggle"><i class="material-icons">chat_bubble</i></button>
			</li>
			<li class="list-item list-1-line">
				<img src="img/avatar.png" class="list-avatar" alt="Avatar">
				<div class="list-item-text layout-column">
					<h3>Trevor Hansen</h3>
				</div>
				<button type="button" class="secondary-container btn btn-default btn-icon-toggle"><i class="material-icons">chat_bubble</i></button>
			</li>
			<li class="list-item list-1-line">
				<img src="img/avatar.png" class="list-avatar" alt="Avatar">
				<div class="list-item-text layout-column">
					<h3>Peter Carlsson</h3>
				</div>
				<button type="button" class="secondary-container btn btn-default btn-icon-toggle"><i class="material-icons">chat_bubble</i></button>
			</li>
			<li class="list-item list-1-line">
				<img src="img/avatar.png" class="list-avatar" alt="Avatar">
				<div class="list-item-text layout-column">
					<h3>Trevor Hansen</h3>
				</div>
				<button type="button" class="secondary-container btn btn-default btn-icon-toggle"><i class="material-icons">chat_bubble</i></button>
			</li>
		</ul>
	</section>
</div>