The sticky sidebar based on JavaScript / jQuery

The sticky-sidebar is a smooth and light-weight pure JavaScript based plug-in. The sticky sidebar created by using this plug-in does not calculate all dimensions but just the necessary ones.

The sidebar that sticks can be small sized or large while the plug-in will handle it smoothly. You may also use jQuery option for creating the sidebar if you want to.

Demo1 Demo2

Developer page Download plug-in

Installing the sidebar plug-in

You may install the sticky-sidebar plug-in via NPM or Bower:

Using Bower:

bower install sticky-sidebar

Using NPM:

npm install sticky-sidebar

You may also get the required JavaScript file by downloading the compressed package from GitHub website. For that, use the above-provided links.

The markup

You need to follow certain guidelines for the markup in order to sticky sidebar working. The main div element contains the sticky bar div and the main content div as shown in the structure below:

<div class="main-content">

    <div class="sidebar">

        <div class="sidebar__inner">

            <!-- The content for the sticky side bar goes here -->

        </div>

    </div>

    <div class="content">

        <!-- Your main content comes here -->

    </div>

</div>

 

See the demos below with JavaScript and jQuery with complete code.

A simple example of sticky sidebar with small content

In this demo, the sidebar contains a little content that does not scroll. The main content is scrollable; so as you scroll down, you will see the left bar sticks:

See online demo and code

As such, this is pure JavaScript based solution – no other dependency file is required. You just need to include the sticky-sidebar.js file. This is how the script is used for the demo:

<script type="text/javascript" src="js/sticky-sidebar/sticky-sidebar.js"></script>

  <script type="text/javascript">



    var a = new StickySidebar('#sticky-sidebar-demo', {

     topSpacing: 25,

      containerSelector: '.container',

     innerWrapperSelector: '.sidebar__inner'

   });

 </script>

 

You may specify the topSpacing option for the distance where sidebar stuck from the top. You also need to specify the container which is the main div in that case.

Besides, the div containing the content for the sticky sidebar is also specified in JavaScript. See the complete code and output on the demo page.

A demo with scrollable sidebar

For this demo, the sidebar with more content is created so that it is scrollable. As you scroll down the page, the sidebar will stick as its content ends after scrolling while the main content towards the right side keeps on scrolling, have a look:

See online demo and code

An example of using jQuery for sticky sidebar

The output is the same as in the first example, except I used jQuery for creating the sticky sidebar. For that, you need to include the jQuery library (if not using already) along with the lightweight JavaScript file (jquery-sticky-sidebar.min.js).

See online demo and code

The script for this demo:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>

  <script type="text/javascript" src="js/sticky-sidebar/jquery-sticky-sidebar.min.js"></script>

   <script type="text/javascript">

      $(document).ready(function(){

      $('#sticky-sidebar-demo').stickySidebar({

      containerSelector: '.container',

      innerWrapperClass: 'sidebar__inner',

      topSpacing: 25

  });

});

</script>

 

See the complete code including the markup on the demo page.