Fix Element To It's Parent Container - jQuery Scroll With Page

File Size: 7.6 KB
Views Total: 2226
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Fix Element To It's Parent Container - jQuery Scroll With Page

Yet another jQuery sticky element created for sticky sidebar that makes an element sticky to its parent container whenever the page scrolls down/up.

The goal of this plugin is to make a sidebar widget always stay on the screen until it reach the bottom of its parent container.

How to use it:

1. Create a sidebar inside your main content as these:

<div class="parent">

  <div id="sidebar">
    Sidebar Widgets Here

  <div class="main">
    Main Content Here

2. Load jQuery library (slim build is recommended) and the jQuery Scroll With Page plugin right before the closing body tag.

<script src="" 
<script src="/dist/scrollWithPage.min.js"></script>

3. Initialize the plugin to make the sidebar alway be visible within its parent container while scrolling.




4. You can also specify the offset element (such as fixed headers) that the element needs to factor in.


  $("#sidebar").scrollWithPage(".parent", "header");


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