Simple jQuery Plugin For Responsive Sticky Elements - Stuck

Stuck is a simple jQuery plugin which allows you to responsively make any Html element sticky as you scroll down the page.

Compatible with any CSS framework: Bootstrap, Foundation, etc.

How to use it:

1. Include jQuery Javascript library and the jQuery stuck plugin in the document.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/src/jquery.stuck.js></script>

2. Add the CSS class 'stuck' to any Html element that will be sticky on your web page.

<div class="stuck">
  ...
</div>

3. Initialize the plugin and we're done.

$(document).ready(function(){
  $(window).stuck();
});

4. The plugin also allows you to make an element sticky within its parent element. Just add the release class to the sticky elements and then wrap them into a container with the CSS class of release-container

<div class="release-container">
  <div class="stuck release">Stuck until bottom of release-container</div>
</div>

5. More examples to learn about the sticky plugin.

• Performance
• Release
• Stack

Changelog:

v1.0.4 (2020-06-07)

• Fixed: Navbars caused page content to jump upon first scroll-down

2016-03-09

• added styles

2014-09-10

• Doc and demo pages updated.

2014-08-29

• Make branding box responsive, add docs and download buttons to main page, title the docs page
• Add margins example, break docs and main page apart, update readme, bump version for link updates

---

This awesome jQuery plugin is developed by alextaujenis. For more Advanced Usages, please check the demo page or visit the official website.