Socket
Socket
Sign inDemoInstall

wd-sticky-headers

Package Overview
Dependencies
2
Maintainers
1
Versions
1
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

    wd-sticky-headers

This is an angularjs directive for making headers scroll with a screen.


Version published
Weekly downloads
15
increased by15.38%
Maintainers
1
Install size
2.77 MB
Created
Weekly downloads
 

Readme

Source

sticky-headers

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

Demo Page

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.

Browser Support

We support the current versions of Chrome, Firefox, Safari, Microsoft Edge and Internet Explorer 10+.

Keywords

FAQs

Last updated on 23 Jun 2016

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc