TOC

by Kushal Jayswal

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="container">
    <!-- Example row of columns -->
    <div class="row">
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <div id="secondary" class="col-md-3"></div>
        <div class="col-md-9">
            <section class="panel panel-default">
                <div class="panel-heading">
                     <h3 class="panel-title">Panel title 1</h3>

                </div>
                <div class="panel-body">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse fermentum diam et varius luctus. Fusce in justo faucibus, porta quam at, tincidunt lacus. Nam eget ligula dignissim, semper velit at, posuere sem. Phasellus malesuada velit odio, ac tristique ante efficitur in. Mauris feugiat ligula sodales mattis ornare. Integer dolor neque, mollis in felis id, dignissim lobortis diam. Sed sollicitudin augue sed neque fermentum, in placerat arcu pulvinar. Aliquam maximus ornare nulla, ut cursus tellus efficitur quis. Aenean vulputate ornare elit, eget auctor sapien lacinia ut. Phasellus fringilla sagittis ipsum sit amet ultrices. Curabitur fermentum mauris non egestas ultrices. Quisque nisi ex, viverra et lobortis sit amet, elementum in eros. Donec finibus lobortis nisi, vitae maximus erat blandit ac.</p>
                </div>
            </section>
            <section class="panel panel-default">
                <div class="panel-heading">
                     <h3 class="panel-title">Panel title 2</h3>

                </div>
                <div class="panel-body">
                    <p>Nulla eu mollis enim. Fusce sollicitudin massa sed ultricies rhoncus. Integer ut vulputate turpis. Morbi tempor tincidunt consequat. Vestibulum dignissim faucibus est, id dapibus metus facilisis a. Donec vitae molestie magna. Donec at est leo. Nulla a faucibus lectus. Ut ut sagittis orci....

JavaScript

;(function($){
	$.fn.AI = function(options){
		
		/*******************************************************************
								Front End Configuration
		*******************************************************************/
		var settings = $.extend({
			appender	: "secondary",		// TOC will append to this ID
			tocTitle	: "Auto Indexr",	// Heading for the generated section
			
			animation	: true,				// smooth scrolling effect
			offset		: 10,				// smooth scrolling top offset value
			
			highlight	: true,				// relevant section highlights with background colors
			affix		: true				// sticks the generated TOC for desktop view
        }, options );
		
		
		/*******************************************************************
										Variables
		*******************************************************************/
		var 
			el				= $(this),
			elSize			= el.length,
			tocTitle		= $('<h4>'+settings.tocTitle+'</h4>'), 
			title,
			_title, 
			appender		= '#'+settings.appender,
			aiWrapper		= $('<div id="autoIndexr" class="ai_1 panel panel-info" style="padding: 10px"/>'),
			htmlBody		= $('html, body'),
			OL				= $('<ol class="clearfix"/>'),
			LI, 
			BADGE,
			affix,
			parentWidth;
		
		
		/*******************************************************************
									Configuration Triggers
		*******************************************************************/
		if(settings.animation){
			smoothScroll();
		}
		
		if(settings.tocTitle){
			BADGE	= $('<h4><span class="toc_title">'+settings.tocTitle+' </span><span class="badge"> '+elSize+'</span></h4>');
			BADGE.prependTo(aiWrapper);
		}
		
		if(settings.highlight){
			highlight();
		}
		
		if(settings.affix){
			$(window).on('scroll',function() {
				affix();
			});
			$(window).on('resize',function() {
				affix();
			});
		}
		
		
		/*******************************************************************
										Main
		*******************************************************************/
		return this.each(function...