Sticky Bottom library - vanilla JS, no external dependency. Mobile friendly in two-states rendering mode.
This is alternative to use css position: sticky. If you can, I would recommend to use css position: sticky instead. This library supports most browsers because it calculate stuff using JS.
A sticky box that sticks at the bottom within a boundary element.
 |
 |
 |
 |
 |
|---|---|---|---|---|
| IE 11+ ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ |
<head>
<link rel="stylesheet" href="dist/sb.bundle.css">
</head>
<body>
<!-- library markup -->
<div class="js sticky-bottom">
<div class="sticky-bottom__boundary">
This is the boundary area,
the sticky box will be around if boundary is in focus
long content here......
</div>
<div class="sticky-bottom__box">
Sticky within boundary, with static height.
</div>
</div>
<!-- end library markup -->
<script src="dist/sb.bundle.js"></script> <!-- library -->
<!-- usage -->
<script>
var stickyBottom = new StickyBottom({ /* optional config */
/* optional */
debug: ".js.sticky-bottom-debug",
/* two-states works best for iOS/Android, default is three-states */
//renderingMode: 'two-states',
/* optional, these are the default query values */
elems: {
area: '.js.sticky-bottom',
box: '.sticky-bottom__box',
boundary: '.sticky-bottom__boundary',
},
});
stickyBottom.init();
//stickyBottom.destroy(); /* use when removed from DOM */
</script>
</body>- git clone the project or download it
- npm install
- npm start
- open a browser and go to localhost:3333
- npm run build
MIT License: http://opensource.org/licenses/MIT