{"id":16427550,"url":"https://github.com/cferdinandi/sticky-footer","last_synced_at":"2025-03-21T04:30:46.557Z","repository":{"id":19746301,"uuid":"23003075","full_name":"cferdinandi/sticky-footer","owner":"cferdinandi","description":"Dynamic, responsive sticky footers.","archived":false,"fork":false,"pushed_at":"2017-04-03T18:56:13.000Z","size":49,"stargazers_count":48,"open_issues_count":2,"forks_count":10,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-03-19T04:34:27.495Z","etag":null,"topics":["footer","javascript","javascript-plugin","no-dependencies","sticky-footer","vanilla-js"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cferdinandi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-08-15T21:13:07.000Z","updated_at":"2024-05-08T04:26:26.000Z","dependencies_parsed_at":"2022-07-23T13:30:52.710Z","dependency_job_id":null,"html_url":"https://github.com/cferdinandi/sticky-footer","commit_stats":null,"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cferdinandi%2Fsticky-footer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cferdinandi%2Fsticky-footer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cferdinandi%2Fsticky-footer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cferdinandi%2Fsticky-footer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cferdinandi","download_url":"https://codeload.github.com/cferdinandi/sticky-footer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244738197,"owners_count":20501794,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["footer","javascript","javascript-plugin","no-dependencies","sticky-footer","vanilla-js"],"created_at":"2024-10-11T08:13:19.952Z","updated_at":"2025-03-21T04:30:46.250Z","avatar_url":"https://github.com/cferdinandi.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Sticky Footer [![Build Status](https://travis-ci.org/cferdinandi/sticky-footer.svg)](https://travis-ci.org/cferdinandi/sticky-footer)\nResponsive sticky footers that adjust dynamically as the screen size changes.\n\n[Download Sticky Footer](https://github.com/cferdinandi/sticky-footer/archive/master.zip) / [View the demo](http://cferdinandi.github.io/sticky-footer/)\n\n\n\u003chr\u003e\n\n### Want to learn how to write your own vanilla JS plugins? Check out [\"The Vanilla JS Guidebook\"](https://gomakethings.com/vanilla-js-guidebook/) and level-up as a web developer. 🚀\n\n\u003chr\u003e\n\n\n\n## Getting Started\n\nCompiled and production-ready code can be found in the `dist` directory. The `src` directory contains development code.\n\n### 1. Include Sticky Footer on your site.\n\n```html\n\u003cscript src=\"dist/js/sticky-footer.js\"\u003e\u003c/script\u003e\n```\n\n### 2. Add the markup to your HTML.\n\n```html\n\u003cdiv data-sticky-wrap\u003e\n\tBody content\n\u003c/div\u003e\n\u003cdiv data-sticky-footer\u003e\n\tFooter content\n\u003c/div\u003e\n```\n\nAdd the `data-sticky-wrap` attribute to a parent `\u003cdiv\u003e` that contains all of your page content. Add the `data-sticky-footer` attribute to the parent `\u003cdiv\u003e` that contains all of your footer content.\n\n### 3. Initialize Sticky Footer.\n\n```html\n\u003cscript\u003e\n\tstickyFooter.init();\n\u003c/script\u003e\n```\n\nIn the footer of your page, after the content, initialize Sticky Footer. And that's it, you're done. Nice work!\n\n\n\n## Installing with Package Managers\n\nYou can install Sticky Footer with your favorite package manager.\n\n* **NPM:** `npm install cferdinandi/sticky-footer`\n* **Bower:** `bower install https://github.com/cferdinandi/sticky-footer.git`\n* **Component:** `component install cferdinandi/sticky-footer`\n\n\n\n## Working with the Source Files\n\nIf you would prefer, you can work with the development code in the `src` directory using the included [Gulp build system](http://gulpjs.com/). This compiles, lints, and minifies code.\n\n### Dependencies\nMake sure these are installed first.\n\n* [Node.js](http://nodejs.org)\n* [Gulp](http://gulpjs.com) `sudo npm install -g gulp`\n\n### Quick Start\n\n1. In bash/terminal/command line, `cd` into your project directory.\n2. Run `npm install` to install required files.\n3. When it's done installing, run one of the task runners to get going:\n\t* `gulp` manually compiles files.\n\t* `gulp watch` automatically compiles files when changes are made and applies changes using [LiveReload](http://livereload.com/).\n\n\n\n## Options and Settings\n\nSticky 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.\n\n### Global Settings\n\nYou can pass callbacks into Sticky Footer through the `init()` function:\n\n```javascript\nstickyFooter.init({\n\tselectorWrap: '[data-sticky-wrap]', // Selector for the wrap container (must use a valid CSS selector)\n\tselectorFooter: '[data-sticky-footer]', // Selector for the footer (must use a valid CSS selector)\n\tcallback: function () {}, // Runs after the footer is stuck\n});\n```\n\n### Use Sticky Footer events in your own scripts\n\nYou can also call Sticky Footer events in your own scripts.\n\n#### destroy()\nDestroy the current `stickyFooter.init()`. This is called automatically during the `init` function to remove any existing initializations.\n\n```javascript\nstickyFooter.destroy();\n```\n\n\n\n## Browser Compatibility\n\nSticky Footer works in all modern browsers, and IE 9 and above.\n\nSticky 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.\n\n\n\n## How to Contribute\n\nIn 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.\n\n\n\n## License\n\nThe code is available under the [MIT License](LICENSE.md).","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcferdinandi%2Fsticky-footer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcferdinandi%2Fsticky-footer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcferdinandi%2Fsticky-footer/lists"}