Customizable jQuery Fixed Position Plugin - fixie

Customizable jQuery Fixed Position Plugin - fixie
File Size: 6.82 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

fixie is a configurable and reusable jQuery plugin that keeps element vertically at fixed position on screen as the page scrolls down.

You might also like:

Basic Usage:

1. Include jQuery library and fixie.js on your page

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="jquery.fixie.js"></script>

2. The html. Make the top header to stay fixed positioned.

<header>
<h1>jQuery fixie Demo</h1>
<nav><a href="https://www.jqueryscript.net/">Download</a> - <a href="https://www.jqueryscript.net/">Back To jQueryScript.Net</a></nav>
</header>

3. Call the plugin.

$('header').fixie();

4. Options available.

$('header').fixie({

  // fixed, relative
  strategy: fixed,

  // top margin
  topMargin: 0,

  // How often to adjust position of element
  throttle: 30,

  // Usually when the user scrolls an element to the top of the page, it becomes "fixed". 
  pinSlop: 0,

  // any css class to add on when pinned
  pinnedClass: '_pinnedToTop', 
  pinnedBodyClass: undefined,

});

Change log:

2017-02-20

  • bug fix, do not override opacity of fixed element when showing it

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