1.2.3 • Published 7 years ago
sticky-block v1.2.3
stickyBlock
This is make any block floating on your page easily
Getting started
npm install sticky-block --save
import "sticky-block";
Old way
- Include jQuery
- Include stickyBlock
- 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