Highly Customizable Sticky jQuery Plugin - jQuery smartSticky

Highly Customizable Sticky jQuery Plugin - jQuery smartSticky
File Size: 17 KB
Views Total: 239
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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,
    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
});

Changelog:

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.