Responsive sticky footers that adjust dynamically as the screen size changes.
Download Sticky Footer / View the demo
In This Documentation
- Getting Started
- Installing with Package Managers
- Working with the Source Files
- Options & Settings
- Browser Compatibility
- How to Contribute
- License
Compiled and production-ready code can be found in the dist
directory. The src
directory contains development code. Unit tests are located in the test
directory.
<script src="dist/js/sticky-footer.js"></script>
<div data-sticky-wrap>
Body content
</div>
<div data-sticky-footer>
Footer content
</div>
Add the data-sticky-wrap
attribute to a parent <div>
that contains all of your page content. Add the data-sticky-footer
attribute to the parent <div>
that contains all of your footer content.
<script>
stickyFooter.init();
</script>
In the footer of your page, after the content, initialize Sticky Footer. And that's it, you're done. Nice work!
You can install Sticky Footer with your favorite package manager.
- NPM:
npm install cferdinandi/sticky-footer
- Bower:
bower install https://github.com/cferdinandi/sticky-footer.git
- Component:
component install cferdinandi/sticky-footer
If you would prefer, you can work with the development code in the src
directory using the included Gulp build system. This compiles, lints, and minifies code, and runs unit tests. It's the same build system that's used by Kraken, so it includes some unnecessary tasks and Sass variables but can be dropped right in to the boilerplate without any configuration.
Make sure these are installed first.
- In bash/terminal/command line,
cd
into your project directory. - Run
npm install
to install required files. - When it's done installing, run one of the task runners to get going:
gulp
manually compiles files.gulp watch
automatically compiles files when changes are made and applies changes using LiveReload.gulp test
compiles files and runs unit tests.
Sticky Footer includes smart defaults and works right out of the box. But if you want to customize things, it also has a robust API that provides multiple ways for you to adjust the default options and settings.
You can pass callbacks into Sticky Footer through the init()
function:
stickyFooter.init({
selectorWrap: '[data-sticky-wrap]', // Selector for the wrap container (must use a valid CSS selector)
selectorFooter: '[data-sticky-footer]', // Selector for the footer (must use a valid CSS selector)
callback: function () {}, // Runs after the footer is stuck
});
You can also call Sticky Footer events in your own scripts.
Destroy the current stickyFooter.init()
. This is called automatically during the init
function to remove any existing initializations.
stickyFooter.destroy();
Sticky Footer works in all modern browsers, and IE 9 and above.
Sticky Footer is built with modern JavaScript APIs, and uses progressive enhancement. If the JavaScript file fails to load, or if your site is viewed on older and less capable browsers, footers will simply float up against the content like they normally would.
In lieu of a formal style guide, take care to maintain the existing coding style. Please apply fixes to both the development and production code. Don't forget to update the version number, and when applicable, the documentation.
The code is available under the MIT License.