jQuery Plugin To Fix Element When Scrolling - standbyme

File Size: 7.75 KB
Views Total: 1836
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin To Fix Element When Scrolling - standbyme

Yet another jQuery plugin for sticky elements that allows you to fix any element relative to its parent container when you scroll down the web page.

How to use it:

1. Load jQuery library and the jQuery standbyme plugin at the end of the document.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="js/standbyme.js"></script>

2. Create a sidebar for your main content.

<div class="main">
  <div class="content">
    <h2>Main Content goes here</h2>
  </div>
  <div class="sidebar">
    <h3>Sidebar content goes here</h3>
  </div>
</div>

3. The required CSS styles.

.standbyme-hidden { visibility: hidden; }

.standbyme.wrapper {
  position: fixed;
  top: 0;
}

4. Call the plugin to make the sidebar fixed when scrolling down, until you reach the bottom of the parent container 'main'.

$('.sidebar').standbyme();

Change log:

2015-07-23

  • adding compatibility

2015-07-22

  • resize listener added
  • add the support function of calculating one element's absolute position

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