Skip to content
31 changes: 31 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -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>
28 changes: 19 additions & 9 deletions src/iscroll.stickyheaders.js
Original file line number Diff line number Diff line change
Expand Up @@ -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();
};
Expand Down Expand Up @@ -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) {
Expand Down