Adding new option

docs/index.md

@@ -33,6 +33,7 @@ Defaults shown below
 		'onHighlight': function(el) {}, //called when a new section is highlighted 
 		'highlightOnScroll': true, //add class to heading that is currently in focus
 		'highlightOffset': 100, //offset to trigger the next headline
+		'addBottomPadding': false, //can receive a selector to which it will add padding in case the navigated element is out of view
 		'anchorName': function(i, heading, prefix) { //custom function for anchor name
 			return prefix+i;
 		},

lib/toc.js

@@ -3,12 +3,49 @@ var verboseIdCache = {};
 $.fn.toc = function(options) {
   var self = this;
   var opts = $.extend({}, jQuery.fn.toc.defaults, options);
+  var $doc = $(document);
+  var $window = $(window);
+  var $bottomPaddingElement = opts.addBottomPadding ? $(opts.addBottomPadding) : [];
 
   var container = $(opts.container);
   var headings = $(opts.selectors, container);
   var headingOffsets = [];
   var activeClassName = opts.activeClass;
 
+  var addPaddingToElement = function (element) {    
+    var needsPadding,
+        currentPadding = parseInt($bottomPaddingElement.css('paddingBottom').replace('px',''), 10) || 0,
+        padding = '',
+        docHeight = $doc.height(),
+        winHeight = $window.height();
+
+    needsPadding = (winHeight + element.offset().top) > (docHeight - currentPadding);
+
+    var updatePadding = function () {
+      $bottomPaddingElement.css({
+        paddingBottom : padding
+      });
+    };
+
+    if (needsPadding) {
+      padding = (winHeight + element.offset().top) - docHeight + currentPadding + 25;
+
+      if (padding !== currentPadding){
+        if (padding < currentPadding){
+          // We wait till the scrolling happened to remove the extra padding
+          var speed = typeof opts.smoothScrolling === 'function' ? 425 : 10;
+          setTimeout(updatePadding, speed);
+        }
+        else {
+          updatePadding();
+        }
+      }
+    }
+    else if (currentPadding){
+      updatePadding();
+    }
+  };
+
   var scrollTo = function(e, callback) {
     if (opts.smoothScrolling && typeof opts.smoothScrolling === 'function') {
       e.preventDefault();
@@ -69,6 +106,11 @@ $.fn.toc = function(options) {
         .text(opts.headerText(i, heading, $h))
         .attr('href', '#' + anchorName)
         .bind('click', function(e) {
+          if ($bottomPaddingElement.length){
+
+            addPaddingToElement($($(e.target).attr('href')));
+          }
+
           $(window).unbind('scroll', highlightOnScroll);
           scrollTo(e, function() {
             $(window).bind('scroll', highlightOnScroll);
@@ -104,6 +146,7 @@ jQuery.fn.toc.defaults = {
   onHighlight: function() {},
   highlightOnScroll: true,
   highlightOffset: 100,
+  addBottomPadding: false,
   anchorName: function(i, heading, prefix) {
     if(heading.id.length) {
       return heading.id;

test/toc.test.js

@@ -89,6 +89,21 @@ suite('toc', function() {
       }, 410);
     });
 
+    // This test does pass on the browser but PhantomJS do weird things to the body so conditions never match
+    test.skip('should add padding to a given element so it can be at the top', function (done) {
+      $('.toc').toc({
+        container: '#fixture',
+        addBottomPadding: '#second_wrapper'
+      });
+
+      $('.toc a:last').click();
+
+      setTimeout(function () {
+        assert.ok($('#second_wrapper').attr('style').indexOf('padding-bottom') !== -1);
+        done();
+      }, 400);
+    });
+
     test('should update on scroll', function(done) {
       assert.equal($(window).scrollTop(), 0);