CSS Codes
CSS Layouts

Creating a sticky vertical scrollspy menu with progress bar

In this section lets see how to use DD ScrollSpy Menu to create a sticky vertical menu that not only highlights the section the user is currently viewing, but displays a progress bar of how much the user has viewed within that section. To do this we'll simply turn on the script's "enableprogress" option, plus make a couple of important CSS injections into the spy menu to facilitate the progress bars inside its links. And to make the menu sticky, we'll turn to an elegant sticky plugin called Sticky. In the end what we get is something very similar to the right sticky menu seen on the article pages of The Daily Beast.

The following is the entire source code for the menu plus a simple two column page layout to house it, for those that just want to get up and going as quickly as possible:

Full HTML Source:

Select All

The above page references the following external files, which you should upload to the same directory as where the page resides:

Continue reading to see a detailed explanation on each portion of the set up.

HTML Markup

Lets dive in with the HTML markup for the vertical menu first:

<div id="stickyspymenu">
<div class="header">Page Navigation</div>
<ul>
<li><a href="#description">This is headline 1</a></li>
<li><a href="#demos">This is headline 2</a></li>
<li><a href="#directions">This is headline 3</a></li>
<li><a href="#setup">This is headline 4</a></li>
</ul>
</div>

Like any DD Scrollspy menu, we give the menu's outermost container an unique ID, then define menu links that each point to a section of the page via a HTML anchor.  As mentioned on the main script page, to create a section, wrap the relevant content inside a parent DIV element and give that DIV a corresponding ID property, such as <div id="description"> to complete the association between a particular spy menu item and that content section on the page.

Spymenu initialization and making it sticky on the page

Next, onto initializing the menu and also making it sticky on the page. The code in red pertains to that for making the menu sticky on the page:

<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script src="jquery.sticky.js"></script>

<script src="ddscrollspy.js">

/*
* DD ScrollSpy Menu Script (c) Dynamic Drive (www.dynamicdrive.com)
* Last updated: Aug 1st, 14'
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
*/

</script>

<script>
jQuery(function($){ // on window load
 $('#stickyspymenu').ddscrollSpy({ // initialize first demo
  enableprogress: 'progress'
 })

 $('#stickyspymenu').sticky({topSpacing:5}) // make menu sticky
})
</script>
</head>

We call the method ddscrollSpy() on the scrollspy menu (by referencing its ID "stickyspymenu") to initialize it. The "enableprogress" option is defined to enable the progress bar feature, specifically, by setting it to the CSS class name we wish each progress bar to carry, in this case, "progress".

Next up, we also want the menu to stay sticky (in view) on the page when the user begins to scroll past it inside the document, and for that, we'll just turn to a sticky plugin called Sticky to get the  job done. Simply download jquery.sticky.js to your site, then add the additions in red to the HEAD section of your page to instantly make our menu sticky. See the main plugin page for options when initializing this plugin.

Table Of Contents

Wordpress Users: Step by Step instructions to add ANY Dynamic Drive script to an entire Wordpress theme or individual Post