sticky-sidebar

What is this?

sticky-sidebar is a plugin, written in vanilla JavaScript, using which you can add fully responsive sticky sidebars to your pages or the entire website.

A sticky sidebar looks like an ordinary sidebar but, remains visible as user scrolls the page. It offers excellent navigation for pages, just like this documentation page, which have a lot of content. Try scrolling and notice how the sidebar stays on the screen but, when you scroll back to top it becomes a normal sidebar.

sticky-sidebar is fully responsive. When user switches to mobile view, it adapts and becomes the popular sticky navbar. Try resizing your browser to see how it responds to different screen sizes.

Download

You can download the zip from the GitHub here.

The zip contains minified files which you can directly use after you extract them out. Next section explains how to install the plugin after you download it.

Installing the plugin

Include the sticky-sidebar-min.css and sticky-sidebar-min.js into your HTML and the plugin is ready to be used.


<!DOCTYPE html>
<html lang="en">
<head>

	<link rel="stylesheet" href="sticky-sidebar-min.css">
	<!-- your stylesheets go here-->
</head>
<body>
	
	<script type="text/javascript" src="stick-sidebar-min.js"></script>
	<!-- your scripts go here-->
</body>
</html>

The markup

Since a sidebar is core part of the layout, the plugin will dictate you page's layout to some degree. Still, sticky-sidebar only looks for the following markup


<div class="sticky-sidebar" data-switch-width="768">
	<h4 class="sticky-sidebar-header"></h4>
	<div class="sticky-sidebar-content"></div>
</div>

<div class="page-content"></div>

The plugin divides the parent container into two parts. <div class="sticky-sidebar"> is the sticky sidebar container. It contains <h4 class="sticky-sidebar-header"> (I am using an <h4> tag. It could be any block level element) which carries sidebar and navbar's heading.

<div class="sticky-sidebar-content"> will contain the actual sidebar content.

<div class="page-content"> is where all the content of your page goes.

If you don't want to use a sidebar heading, you can leave this tag empty. But you must have an element with class sticky-sidebar-header since it is targeted to insert the responsive icon in the mobile navbar layout mode.

<div class="sticky-sidebar"> must come before the <div class="page-content"> in the markup.

The layout

CSS floats are used for doing the layout. Here is the exact CSS as used in plugin


/* For the sidebar layout */
.page-content{
	width: 75%;
	float: left;
}

.sticky-sidebar{
	width: 25%;
	float: right;
}

/*For the navbar layout*/
.page-content.navbar{
	float: none;
	width: 100%;
}

.sticky-sidebar.navbar{
	position: relative;
	float: none;
	width: 100%;
	z-index: 1;
}

The sidebar is floated right by default. Since we want the page to be responsive, percentage(%) widths are used. All these defaults can be easily overridden in your CSS by using the above hooks.

The widths values are % of the parent container's, as defined by the user (<body> by default), width.

Customize

Setting mobile view width

data-switch-width is used to specify the width(in pixels) at which page changes to the mobile layout. When the attribute is not provided, the page remains with the sticky sidebar at all screen widths. The sidebar's width still adjusts since a percentage(%) value is used.

Changing sticky navbar's colors

Some default background color has been added to the navbar's styles so that it works out of the box. You can use the following CSS selectors to override those in your CSS file.


.sticky-sidebar.navbar .sticky-sidebar-header{
	/* navbar's header */
	background-color: #your-color-here;
}

.sticky-sidebar.navbar .sticky-sidebar-header:after{
	/* 3 dashed responsive icon */

}

/* use the exact selector */
.sticky-sidebar.navbar .sticky-sidebar-content,
.sticky-sidebar.navbar .sticky-sidebar-content.plain {
	/* navbar's menu which is toggled on tapping */

}

Optimize using media queries

This part is optional and uses CSS3 Media Queries. If you don't understand how media queries work; just skip this and use the plugin as described above.

sticky-sidebar handles the mobile layout by adding the navbar class using window.resize event. But the layout is best handled by CSS and for responsive mobile layouts we use the CSS3 Media Queries.

Using Media Queries improves the performance by reducing the amount of JavaScript code that runs to handle the mobile layout. It also makes the CSS code simpler and more easy to edit and maintain. I strongly recommend using sticky-sidebar plugin with media queries.

Use the following steps to setup sticky-sidebar plugin, from start, to use media queries.

1. Add and set data-optimize = "true" to the <div class="sticky-sidebar">. This attribute tells the plugin that the layout will be handled by the user. The basic markup now looks like this


<div class="sticky-sidebar" data-switch-width="768" data-optimize="true">
	<h4 class="sticky-sidebar-header"></h4>
	<div class="sticky-sidebar-content"></div>
</div>

<div class="page-content"></div>

2. Open the CSS file sticky-sidebar-opt.css that is included in the plugin. Copy all the CSS code from that file into "your" basic CSS file that you are using for the page. This code already contains the media query that we need.

3. Set the media query's width equal to that of the data-switch-width attribute of the <div class="sticky-sidebar">. The media query for data-switch-width="768" will then look something like this


@media screen and (max-width: 768px){
	....
}

4. And we are done. Now the plugin's CSS is exposed to you which could be easily edited. We improved the performance of the plugin by reducing the JS code being run. We also reduced one extra HTTP request for the separate CSS file.

Don't try to link the sticky-sidebar-opt.css file. You have to copy the code, otherwise it causes the selector specificity issues when we customize the sidebar.

Remove the link tag for sticky-sidebar-min.css if you have it in your markup. We don't need that file. The code copied has all the CSS you need.

Complete markup example

Here is the skeleton of the markup used for this documentation page. This may help to clarify the above points and examples.


<!DOCTYPE html>
<html lang="en">
<head>

	<link rel="stylesheet" href="sticky-sidebar-min.css">
	<!-- your stylesheets go here-->
</head>
<body>

	<div class="header"></div>

	<div class="main-wrapper clearfix">

		<div class="sticky-sidebar" data-switch-width="768">

			<h4 class="sticky-sidebar-header"></h4>

			<div class="sticky-sidebar-content"></div>

		</div> <!-- END STICKY SIDEBAR-->

		<div class="page-content"> </div>

	</div><!-- END MAIN WRAPPER-->

	<div class="footer"></div>

	<script type="text/javascript" src="stick-sidebar-min.js"></script>
	<!-- your scripts go here-->
</body>
</html>

Now we can use the main-wrapper to center our content. You should also add the clearfix class (CSS is already included in the plugin. Just have to add the class) to the main-wrapper since floats cause the parent to collapse and have zero height. Here is the CSS for the parent


.main-wrapper{
	max-width: 1200px;
	margin: 0 auto;
}