Highly Customizable Sticky jQuery Plugin - jQuery smartSticky

A smart and highly customizable Sticky jQuery plugin that enables you to make any element stay in the same place (top or bottom) as the page is scrolled.

More Features:

• Allows you to set a delay before the element gets stuck.
• Allows you to make an element sticky within a specific container.
• Custom left margin and width.
• Allows you to customize the styles of the sticky element depending on the current state.
• Allows you to set the visibility based on the scroll direction and/or device type.

How to use it:

1. To get started, include jQuery library and the smartSticky plugin's files on the page.

<!-- jQuery -->
<script src="/path/to/jquery.slim.min.js"></script>
<!-- smartSticky files -->
<script src="/path/to/dist/js/jquery.smartSticky.min.js"></script>
<link rel="stylesheet" href="/path/to/dist/css/jquery.smartSticky.min.css" />

2. Just attach the function smartSticky function to the element which should be sticky on page scroll and down.

<div class="sticky-smart-demo">
  My Sticky Content
</div>

$('.sticky-smart-demo').smartSticky({
  // options here
});

3. Pin the element at the bottom of the page and only show it when the page scrolls up.

$('.sticky-smart-demo').smartSticky({
  show: {
    fixed: 'bottom',
    scrolling: {
      up: true,
      down: false
    }
  }
});

4. Toggle the position of the sticky element depending on the scroll direction.

$('.sticky-smart-demo').smartSticky({
  show: {
    fixed: 'toggle',
    scrolling: {
      up: true
    }
  }
});

5. Override the default delay time in ms.

$('.sticky-smart-demo').smartSticky({
  show: {
    delay: 400
  }
});

6. Stretch the element to the full width when getting stuck.

$('.sticky-smart-demo').smartSticky({
  container: function (manager) {
    return manager.elem.closest('.row');
  }
});

7. Make the element sticky above the original position.

$('.sticky-smart-demo').smartSticky({
  show: {
    original: {
      above: true
    }
  }
});

8. Customize the CSS styles depending on the current Sticky state.

$('.sticky-smart-demo').smartSticky({
  show: {
    fixed: 'bottom',
    scrolling: function (manager, scrollingBottom) {
      if (scrollingBottom) {
        manager.elem.css('color', 'red');
      }
      else {
        manager.elem.css('color', 'green');
      }
      return true;
    }
}
}).on('smartSticky.deactivate', function () {
  $(this).css('color', 'black');
});

9. All default customization options.

$('.sticky-smart-demo').smartSticky({
  show: {
    delay: 50,
    immediately: false,
    original: {
     under: true,
     above: false
    },
    fixed: 'top',
    scrolling: {
      up: false,
      down: true
    }
  },
  container: null,
  css: {
    classes: {
      placeholder: 'sticky-smart-placeholder',
      root: 'sticky-smart',
      invisible: 'sticky-smart-invisible',
      active: 'sticky-smart-active',
      background: 'sticky-smart-background',
      container: 'sticky-smart-container'
    },
    fixed: {
      width: false,
      left: false
    }
  }
});

10. Make the element fixed at the bottom only on mobile devices (screen size < 768px).

$('.sticky-smart-demo').smartSticky({
  show: {
    fixed: function () {
      if ($(window).width() < 768) {
        return 'bottom';
      }
    },
    scrolling: function (manager, scrollingBottom) {
      if ($(window).width() < 768) {
        return !scrollingBottom;
      }
      return scrollingBottom;
    }
  }
});

11. Enable & disable the plugin programmatically.

instance.smartSticky('disable');
instance.smartSticky('enable');

12. Update the options.

instance.smartSticky('setOptions', {
  // options here
});

13. Hide the sticky element.

instance.smartSticky('hide');

14. Event handlers.

$('.sticky-smart-demo').smartSticky({
  // options here
}).on('smartSticky.activate', function () {
  // do something
}).on('smartSticky.deactivate', function () {
  // do something
}).on('smartSticky.activated', function () {
  // do something
}).on('smartSticky.deactivated', function () {
  // do something
}).on('smartSticky.init', function () {
  // do something
});

Changelog:

v2.7.1 (2021-10-09)

• improve performance

v2.6.2 (2021-10-09)

• removing inner overflowing element feature

v2.6.1 (2020-08-15)

• more events

v2.6.0 (2020-07-23)

• overflowing container customization, bugfixes

v2.4.0 (2020-07-04)

• support of fixed header in tables, better event handling

v2.3.1 (2020-07-02)

• IE bugfixes, again.

v2.3.0 (2020-06-30)

• IE bugfixes, simplification

v2.1.1 (2020-05-16)

• Added managers and callbacks
• Fixed IE
• Refactor yCoord

v2.0.0 (2020-05-14)

• Bugfix default settings, support of inner overflowing container, refactor, defining own placement positions callbacks support

v1.4.0 (2020-05-02)

• Bugs fixed

v1.3.1 (2020-05-01)

• Bugs fixed
• Added more methods.

v1.0.2 (2020-05-01)

• optimalization, refactoring, renaming

---

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