stickyBlock

This is make any block floating on your page easily

Getting started

npm install sticky-block --save import "sticky-block";

Old way

1. Include jQuery
2. Include stickyBlock
3. Call stickyBlock with your options after window load

<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/jquery.sticky-block.js"></script>
<script>
    $(window).load(function() {
      $('.js-float-block').stickyBlock({
        'top': 20,
        'end': {
          'element': $('.footer'),
          'offset': 20
        }
      });
    });
</script>

Options

Options list:

Events

Events list: sticky-block-start - when an element begins floating sticky-block-end - when the element reaches the limit sticky-block-default - when the element returns to its original position

<script>
    $('.js-float-block').on('sticky-block-start', function() {
    console.log('start');
    });
    
    $('.js-float-block').on('sticky-block-end', function() {
    console.log('end');
    });
    
    $('.js-float-block').on('sticky-block-default', function() {
    console.log('default');
    });
</script>

Methods

destroy - remove element from stickyBlock

<script>
    $('.js-float-block').stickyBlock('destroy');
</script>

Animation effects

Effects list: You must connect - jquery.sticky-block-animate.css for animation

• fadeIn
• fadeInDown
• bounceInDown
• bounceIn
• slideInDown
• zoomInDown
• flipInX
• flipInY

Browser Support

All modern browsers and IE9+ (animation effects IE10+)

Example

See example - stickyBlock