Create Sticky Sidebars In Two-Column Layout - Sticky Block

Sticky Block is a lightweight and responsive jQuery plugin to create a two-column layout with sticky sidebars in the document.

The sticky sidebar sticks to the top of the page within its parent section when scrolling until it reaches the next one.

The plugin has the ability to automatically disable the Sticky behavior on small screens (like mobile) and display the sticky sidebars as normal content blocks on the top of their respective sections.

Great for storytelling, portfolio, documentation, product showcase and much more.

How to use it:

1. Insert jQuery library together with the sticky block plugin's files into the HTML.

<link rel="stylesheet" href="/path/to/jquery-sticky-block.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/jquery-sticky-block"></script>

2. Create sticky blocks that consist of left & right columns and sticky sidebars as follows:

<!-- Sticky block starts here -->
<div id="sticky-block-1" class="sticky-block-wrapper">
  <div class="sticky-block-row">
    <!-- Column Left Starts here -->
    <div class="column-left">
      <!-- Content block sticky 1 starts -->
      <div class="content-block-left content-block-01 sticky">
        <h2>Sticky Block 1</h2>
      </div>
    <!-- Content block sticky 1 ends -->
    </div>
    <!-- Column Left Ends here -->
    <!-- Column Right Starts here -->
    <div class="column-right">
      <!-- Content block 1 starts -->
      <div class="content-block-right content-block-02">
        <h3>Main Content 1</h3>
        <p>Description 1</p>
      </div>
        <!-- Content block 10 ends -->
    </div>
        <!-- Column Right Ends here -->
  </div>
</div>
<div class="clearfix"></div>
<!-- Sticky block ends here -->

3. Call the function on the top container and the plugin will do the rest.

$(function(){
  $('.sticky-block-wrapper').stickyBlock();
});

Changelog:

2021-03-22

• CSS Update

---

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