jQuery Plugin To Fix Element Within Its Parent Container - nail

Yet another jQuery sticky element plugin which sticky a specific element to the top of the webpage until it reaches the bottom of its parent container. Useful for creating a sticky sidebar on your webpage.

How to use it:

1. Add references to jQuery library and the jQuery nail plugin into your html page.

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

2. The JavaScript to make the element '#leftNav' sticky relative to its parent container.

$('#leftNav').nail();

3. Default plugin options and callback functions.

$('#leftNav').nail({

  fixTop: 0,
  onTop: function(elem) {
    // ...
  },
  onBottom: function(elem) {
    // ...
  },
  onFixed: function(elem) {
    // ...
  }
  
});

Change log:

2016-11-14

• added more option.

---

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