Stick Elements To Top/Bottom When Scrolled Into View - jQuery ncAffix

ncAffix is a new jQuery Sticky plugin that makes any element on your webpage stick to the top or bottom of its parent container when it comes into view.

It works by monitoring the scroll position of the parent container and sticking the specified element to the top or bottom when the container is scrolled into view. This can ensure that essential content (like ads, sidebars, nav menus, CTA buttons, etc) remains within the viewer's sight at all times. 

How to use it:

1. To get started, download and load the jQuery ncAffix plugin's script after jQuery.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/dist/jquery.affix.min.js"></script>

2. Call the function ncAffix on the element to be stuck and specify the target element that holds the sticky element.

<div id="parent">
  <div id="example">
    Sticky Element
  </div>
</div>

$('#example').ncAffix({
  target: '#parent'
})

3. Set the offset of the sticky element. Default: 0.

$('#example').ncAffix({
  target: '#parent',
  offset: 20,
})

4. Customize the position of the sticky element. Default: 'top'.

$('#example').ncAffix({
  target: '#parent',
  position: 'bottom',
})

5. Alter the z-index prop of the sticky element. Default: 100.

$('#example').ncAffix({
  target: '#parent',
  zIndex: 9999,
})

6. Available callback functions.

$('#example').ncAffix({
  target: '#parent',
  onChange: () => {
    // do something
  },
  onScroll: () => {
    // do something
  },
})

---

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