Press "Enter" to skip to content

How To Build Multiple Stacking Sticky Sidebars | sticky block

Sticky Block is a lightweight and responsive jQuery plugin for creating a two-column layout with sidebars pinned into the document.

The sticky sidebar sticks to the top of the page inside the original section when scrolling until it reaches the next section.

How to make use of it:

1. Insert the jQuery library along 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 include 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 remaining.

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

Sticky Sidebars In Two-Column Layout, jquery sticky block Plugin/Github


See Demo And Download

Official Website(debrajrakshit): Click Here

This superior jQuery/javascript plugin is developed by debrajrakshit. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *