jQuery Plugin To Make Element Fixed When Scrolling - nail.js

File Size: 4.46 KB
Views Total: 2317
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
jQuery Plugin To Make Element Fixed When Scrolling - nail.js

nail.js is a very small jQuery plugin that makes any element fixed positioned on page scroll until you reach the bottom of its parent container.

How to use it:

1. Create a sidebar that will get fixed positioned relative to its parent container 'wrapper'.

<div class="wrapper">
  <div class="main-content">      
  <div class="sidebar">

2. Load jQuery library and the jQuery nail.js plugin at the end of your document.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="dist/jquery.nail.min.js"></script>

3. Call the function on the sidebar element.

  lOr: 'right' // right sidebar

4. Configuration options.


  // sibling elements
  nailBrother: nailObj.siblings(),

  // parent element
  nailObj_wrap: nailObj.parent(), 

  // left or right
  lOr: 'left',

  // top offset in pixels
  topOffset: 0, 

  // true or false
  onlyTop: false, 

  // bottom offset pixels
  bottomOffset: 0, 

  // callbacks
  defaultCall: null, 
  fixedCall: null,  
  floorCall: null


Change log:


  • fixed when working on long webpage.


  • minor change

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