diff --git a/index.html b/index.html
new file mode 100644
index 0000000..0bbdccc
--- /dev/null
+++ b/index.html
@@ -0,0 +1,31 @@
+<html>
+<head>
+    <title>iScroll sticky headers</title>
+</head>
+<meta name="HandheldFriendly" content="True" >
+<meta name="MobileOptimized" content="320" >
+<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi" >
+<meta name="apple-mobile-web-app-capable" content="yes" >
+<body>
+
+<h1>Sticky headers demo</h1>
+<ul>
+    <li><a href="examples/regular.html">Regular headers</a></li>
+    <li><a href="examples/transition.html">Transitioned headers</a></li>
+</ul>
+
+<script type="text/javascript">
+
+  var _gaq = _gaq || [];
+  _gaq.push(['_setAccount', 'UA-27773239-1']);
+  _gaq.push(['_trackPageview']);
+
+  (function() {
+    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+  })();
+
+</script>
+</body>
+</html>
diff --git a/src/iscroll.stickyheaders.js b/src/iscroll.stickyheaders.js
index d502d25..4867d32 100644
--- a/src/iscroll.stickyheaders.js
+++ b/src/iscroll.stickyheaders.js
@@ -16,17 +16,18 @@
         trnOpen = 'translate' + (has3d ? '3d(' : '('),
         trnClose = has3d ? ',0)' : ')';
 
-    iScroll.prototype.enableStickyHeaders = function (selector) {
-        return new iScrollStickyHeaders(this, selector);
+    iScroll.prototype.enableStickyHeaders = function (selector, offset) {
+        return new iScrollStickyHeaders(this, selector, offset);
     };
 
-    var iScrollStickyHeaders = function (iscroll, selector) {
+    var iScrollStickyHeaders = function (iscroll, selector, offset) {
         if (!iscroll.options.useTransform) {
             return;
         }
 
         this.iscroll = iscroll;
         this.selector = selector;
+        this.offset = offset;
 
         this.initialize();
     };
@@ -54,12 +55,21 @@
             this.headers = [];
 
             for (i = 0, ii = elms.length; i < ii; i++) {
-                var header = {
-                        elm: elms[i],
-                        minY: elms[i].offsetTop,
-                        maxY: elms[i].offsetHeight + elms[i].offsetTop
-                    },
-                    prevHeader = this.headers[i - 1];
+                if (this.offset) {
+		            var header = {
+	                        elm: elms[i],
+	                        minY: elms[i].offsetTop - this.offset,
+	                        maxY: elms[i].offsetHeight + elms[i].offsetTop - this.offset
+	                    },
+	                    prevHeader = this.headers[i - 1];
+	            } else {
+	                var header = {
+	                        elm: elms[i],
+	                        minY: elms[i].offsetTop,
+	                        maxY: elms[i].offsetHeight + elms[i].offsetTop
+	                    },
+	                    prevHeader = this.headers[i - 1];
+				}
 
 
                 if (prevHeader) {
