sticky-header's Introduction

sticky-headers

An AngularJS directive for making headers that won't scroll past the top of the screen.

How to use it

Just include jQuery, Angular, and the sticky-headers JavaScript file in your page. You can also install it using either bower or npm:

bower install fsm-sticky-header

# or

npm install fsm-sticky-header

  <head>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js"></script>
	<script src="https://rawgithub.com/FutureStateMobile/sticky-headers/master/src/fsm-sticky-header.js"></script>
  </head>

Then include the fsm Angular module in your own module:

angular.module('MyHappyModule', ['fsm']);

Then add the directive to the element that you with to stick to the top of the page

  <table ng-app="MyHappyModule" id="testtable">
    <thead>
      <tr fsm-sticky-header scroll-body="#testtable" scroll-stop='50'>
         <th>Column One Header</th>
         <th>Column Two Header</th>
      </tr>
    </thead>
    <tbody>
      <tr>
         <td>table1 data1</td>
         <td>table1 data1</td>
      </tr>
      <tr>
         <td>table1 data2</td>
         <td>table1 data2</td>
      </tr>
      ...
    </tbody>
  </table>

Options

scroll-body
- this is the JQuery selector of the element that your header is bound to. Sticky header will follow the position of that element and keep the header on top of that element as it scrolls off the page.
scroll-stop
- this is how many pixels from the top of the page your elment will stop scrolling at, just in case you have a header on the top of your page.
scrollable-container
- If you have a scrollable element such as a div, rather than the web page body scrolling, you'll need to specify that element id here.