datamosh/fixedscroll.html

## fixedscroll.html

<!doctype html>
<html lang="es">
<head>
	<title></title>
	<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
	<meta charset=utf-8/>
</head>
<style type="text/css" media="screen">
.message {
	margin: 4px;
	border: 1px solid green;
}

button {
	display: block;
	width: 100%;
	height: 40px;
}
</style>
<script>
$(function() {
	for (var i = 0; i < 5; i++) {
		$('.message:first').clone().appendTo('body').css({
			backgroundColor: '#'+(Math.random()*0xFFFFFF<<0).toString(16)
		})
	}

	$(document).scrollTop($(document).height())

	function loadMore() {
		var firstMsg = $('.message:first'),
			curOffset = firstMsg.offset().top - $(document).scrollTop()

		firstMsg.before($('.message').eq(5).clone())
		firstMsg.before($('.message').eq(5).clone())
		firstMsg.before($('.message').eq(5).clone())

		$(document).scrollTop(firstMsg.offset().top-curOffset)
	}

	setInterval(loadMore, 500)
})
</script>
<body>
	<div class="message">
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam elit mi, mattis dictum placerat vel, lacinia nec metus. Etiam eu nunc ut sapien tempus luctus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque eget libero ligula, nec blandit metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam elit mi, mattis dictum placerat vel, lacinia nec metus. Etiam eu nunc ut sapien tempus luctus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque eget libero ligula, nec blandit metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam elit mi, mattis dictum placerat vel, lacinia nec metus. Etiam eu nunc ut sapien tempus luctus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque eget libero ligula, nec blandit metus.
	</div>
</body>
</html>

	<!doctype html>
	<html lang="es">
	<head>
	<title></title>
	<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
	<meta charset=utf-8/>
	</head>
	<style type="text/css" media="screen">
	.message {
	margin: 4px;
	border: 1px solid green;
	}

	button {
	display: block;
	width: 100%;
	height: 40px;
	}
	</style>
	<script>
	$(function() {
	for (var i = 0; i < 5; i++) {
	$('.message:first').clone().appendTo('body').css({
	backgroundColor: '#'+(Math.random()*0xFFFFFF<<0).toString(16)
	})
	}

	$(document).scrollTop($(document).height())

	function loadMore() {
	var firstMsg = $('.message:first'),
	curOffset = firstMsg.offset().top - $(document).scrollTop()

	firstMsg.before($('.message').eq(5).clone())
	firstMsg.before($('.message').eq(5).clone())
	firstMsg.before($('.message').eq(5).clone())

	$(document).scrollTop(firstMsg.offset().top-curOffset)
	}

	setInterval(loadMore, 500)
	})
	</script>
	<body>
	<div class="message">
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam elit mi, mattis dictum placerat vel, lacinia nec metus. Etiam eu nunc ut sapien tempus luctus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque eget libero ligula, nec blandit metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam elit mi, mattis dictum placerat vel, lacinia nec metus. Etiam eu nunc ut sapien tempus luctus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque eget libero ligula, nec blandit metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam elit mi, mattis dictum placerat vel, lacinia nec metus. Etiam eu nunc ut sapien tempus luctus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque eget libero ligula, nec blandit metus.
	</div>
	</body>
	</html>