在移动中滚动时加载图像背景

Question

您好我正在开发移动应用程序。其后面的设计如

我想显示加载图标的图像，只有内容上的灰色背景，即页脚和页面页眉之间。我能够实现它，但我面临的唯一问题是滚动时在移动中 灰色背景的位置正在向下移动。我试着设定位置固定。仍然没有改善。请看一下css：

.loading {
	width: 100%;
	height: 100%;
	top: 95px;/*this is for setting the background greyed out position just after the header*/
	margin: 0;
	display: none;
	position: absolute;
	z-index: 100;
	opacity: 0.6;
	background: rgba(0, 0, 0,0.3);
	-webkit-transform: translateZ(0);
}

.loading img {
	position: absolute;
	top: 33%;
	left: 45%;
	background-position: center;
}

<div id="wrap" data-role="page">
	<div data-role="header"></div>

	<div id="main" data-role="main" class="ui-content" data-theme="b">
		<div class="loading" id="loader">
			<img alt="" src="JQueryMobile/images/ajax-loader.gif" id="Img1" />
		</div>
	</div>
</div>

<div id='footer'>

</div>

任何人都可以帮助我，你可以找到屏幕截图Here