Simple jQuery Plugin For Responsive Sticky Elements - Stuck

Simple jQuery Plugin For Responsive Sticky Elements - Stuck
File Size: 1.81 MB
Views Total: 2666
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.

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.