How to Implement Fixed Top and Bottom Bars in Mobile Sites with iscroll.js

In this post, I’ll explain how to implement fixed top and bottom bars on mobile sites using the iscroll.js JavaScript library.

Header (meta) Tag Descriptions

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">

JavaScript Example for Implementing Fixed Bars with iscroll.js

Load the iscroll.js file and specify the area where you want to set the fixed bars (id=”wrapper”).

<script type="text/javascript" src="iscroll.js"></script>
<script type="text/javascript">
var myScroll;
function loaded() {
	myScroll = new iScroll('wrapper');
}
//document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false);
</script>

CSS Example for Implementing Fixed Bars

CSS description for the header (#header), footer (#footer), and scrolling area (#wrapper). Adjust as needed.

<style type="text/css" media="all">
body,ul,li {
	padding:0;
	margin:0;
	border:0;
}
body {
	font-size:12px;
	-webkit-user-select:none;
    -webkit-text-size-adjust:none;
	font-family:helvetica;
}
h1{
	font-size:14px;
	font-weight:normal;
	text-align:center;
	margin:0;
	padding:0;
}
#header {
	position:absolute; z-index:2;
	top:0; left:0;
	width:100%;
	height:45px;
	line-height:45px;
	background-color:#d51875;
	background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #fe96c9), color-stop(0.05, #d51875), color-stop(1, #7b0a2e));
	background-image:-moz-linear-gradient(top, #fe96c9, #d51875 5%, #7b0a2e);
	background-image:-o-linear-gradient(top, #fe96c9, #d51875 5%, #7b0a2e);
	padding:0;
	color:#eee;
	font-size:20px;
	text-align:center;
}
#header a {
	color:#f3f3f3;
	text-decoration:none;
	font-weight:bold;
	text-shadow:0 -1px 0 rgba(0,0,0,0.5);
}
#footer {
	position:absolute; z-index:2;
	bottom:0; left:0;
	width:100%;
	height:48px;
	background-color:#222;
	background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #999), color-stop(0.02, #666), color-stop(1, #222));
	background-image:-moz-linear-gradient(top, #999, #666 2%, #222);
	background-image:-o-linear-gradient(top, #999, #666 2%, #222);
	padding:0;
	border-top:1px solid #444;
}
#wrapper {
	position:absolute; z-index:1;
	top:45px; bottom:48px; left:0;
	width:100%;
	background:#aaa;
	overflow:auto;
}
#scroller {
	position:absolute; z-index:1;
/*	-webkit-touch-callout:none;*/
	-webkit-tap-highlight-color:rgba(0,0,0,0);
	width:100%;
	padding:0;
}
#scroller ul {
	list-style:none;
	padding:0;
	margin:0;
	width:100%;
	text-align:left;
}
#scroller li {
	padding:0 10px;
	height:40px;
	line-height:40px;
	border-bottom:1px solid #ccc;
	border-top:1px solid #fff;
	background-color:#fafafa;
	font-size:14px;
}
</style>

HTML Description for the Area to Implement Fixed Bars

Prepare the header (id=”header”), footer (id=”footer”), and scrolling area (id=”wrapper”).

<div id="header">
<h1>Displaying Fixed Bars in a Mobile Browser</h1>
</div>


<div id="wrapper">

<div id="scroller">

<ul id="thelist">

 	<li>1.CSS</li>


 	<li>2.Facebook</li>


 	<li>3.HTML5</li>


 	<li>4.JavaScript</li>


 	<li>5.Ajax</li>


 	<li>6.jQuery</li>


 	<li>7.PHP</li>


 	<li>8.Smarty</li>


 	<li>9.SEO</li>


 	<li>10.WordPress</li>


 	<li>12.Android</li>


 	<li>13.iPhone</li>


 	<li>14.CSS</li>


 	<li>15.Facebook</li>


 	<li>16.HTML5</li>


 	<li>17.JavaScript</li>


 	<li>18.Ajax</li>


 	<li>19.jQuery</li>


 	<li>20.PHP</li>


 	<li>21.Smarty</li>


 	<li>22.SEO</li>


 	<li>23.WordPress</li>


 	<li>24.Android</li>


 	<li>25.iPhone</li>

</ul>

</div>

</div>


<div id="footer"></div>

iscroll.js: Demo Page to Implement Fixed Bars on Mobile Sites

iscroll.js: Demo Page to Implement Fixed Bars on Mobile Sites

Original Source：iScroll 4

It’s easier to do this using CSS’s fixed instead of this complex method.

　
*Please use this at your own risk.Do not copy the Google Analytics tag from the demo page’s tag.