Customizable jQuery Fixed Position Plugin - fixie

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:

• Yet Another Sticky Element Plugin For jQuery - sticky.js
• Sticky Top Menu Bar with CSS3
• Sticky Any Element Plugin with jQuery
• jQuery Contained Sticky Sidebar Plugin - stickyMojo
• Content Sticky on Scroll with jQuery - Stickem
• Fixed Position Elements Plugin for jQuery - Fixer
• jQuery Plugin For Fixed Position Elements - lockfixed
• Fixed Table of Contents Plugin with jQuery
• Fixed Position Top Menu Bar with jQuery and CSS3 - nagging-menu
• Simple jQuery Sticky Fixed Position Plugin - fixto

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.