maxulyanov / stickyBlock

This is make any block floating on your page easily

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:

Name	Description	Type	Default Value
start	Options at the beginning of a floating	Object	'element':self, 'border':'top', 'offset':0
start.element	jQuery object (dom) starts floating	jQuery_object	self
start.border	Border start element 'top' or 'bottom'	String	'top'
start.offset	Оffset in px before the start floating	Number	0
end	Options at the end of the floating	Object	'element':null, 'border':'top', 'offset':0
end.element	jQuery object (dom) to the end of the floating	jQuery_object	null
end.border	Border end element 'top' or 'bottom'	String	'top'
end.offset	Оffset in px before the end floating	Number	0
top	Offset top during the floating	Number	0
parent	Sets the parent of which is targeted to be absolute positioning for the final position of the current element . If none of the parent element does not have a position: relative - is the recommended setting to ignore.	jQuery object	null
cache	Сache options (it recommended only for static pages)	Boolean	false
animate	Animation effects	String	false
wrapperClass	Add class to the wrapper	String	''
returnToInitialState	To return to the initial state. Function must return true	Function	null

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