Edit in JSFiddle

<div class="container">
	<div class="wrapper">
		<div class="fixPos"></div>
		<div class="content" id="con">
			<h1>Solute an absolute elements scroll width no delay, no blink!</h1>
			<P>I love you so much, whidy!</P>
			<P>And you?</P>
		</div>
	</div>
</div>

body {
	background: #eee;
	margin: 0;
	padding: 0;
}
.container {
	width: 1000px;
	height: 5000px;
	background: #ddd;
	margin: 0 auto;
}
.wrapper {
	height: 400px;
	width: 998px;
	background: #ccc;
	border: 1px solid #aaa;
	position: relative;
	top:5%;
	overflow: hidden;
}
.fixPos {
	position: fixed;/* 解决CHROME不闪动的问题,不信你删了试试! */
	visibility:hidden;
}
.content {
	width:940px;
	font: 100%/200% "Microsoft YaHei";
	padding:0 30px;
	position: absolute;
	top: 50px;
}
.content h1 {
	font:bold 150%/200% "Microsoft YaHei";
}

window.onscroll = function(){
	var con=document.getElementById('con');
	// var scrollTopValue = document.documentElement.scrollTop || document.body.scrollTop;
	// con.style.top = scrollTopValue/2 + 50 + 'px';
	if(!document.body.scrollTop){//for IE
		con.style.top = document.documentElement.scrollTop/2 + 50 + 'px';
	} else {
		con.style.top = document.body.scrollTop/2 + 50 + 'px';
	}
}