stefan-jonker/Plakdiv

## Plakdiv

<!DOCTYPE html>
<html lang="nl">
<head>
 	<meta charset="utf-8" />

	<title>Plakkende Div</title>

	<script>
	window.onload = function () {
		window.onscroll = function () {
			var doc = document.body,
			scrollPosition = doc.scrollTop,
			pageSize = (doc.scrollHeight - doc.clientHeight),
			percentageScrolled = Math.floor( (scrollPosition / pageSize) * 100);

			if (percentageScrolled < 50) {
			        document.getElementById('menu').style.backgroundColor='green';
			        document.getElementById('menu').style.position='relative';
			}

			if (percentageScrolled >= 50) {
			        document.getElementById('menu').style.backgroundColor='#FF0000';
			        document.getElementById('menu').style.position='fixed';
			}
		};
	};
	</script>
</head>

<body>

<div id="menu">
<ul>
	<li>Link</li>
	<li>Link</li>
	<li>Link</li>
	<li>Link</li>
	<li>Link</li>
</ul>
</div>

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla odio vel nisi dapibus consectetur. Donec nec quam nulla. Cras at felis vitae tortor sodales blandit. Pellentesque vitae dapibus lectus. In scelerisque sollicitudin augue, consequat fermentum enim pharetra ac. Vestibulum purus ligula, egestas id cursus id, sodales sed libero. Cras nulla massa, iaculis eget mattis sit amet, posuere id nisi. Duis sit amet augue lectus, ac tempor elit. Mauris et nunc orci. Aenean tristique, turpis et cursus rutrum, purus nunc auctor felis, pretium elementum elit nulla id sapien. Duis eleifend libero a justo porta id porttitor lacus tristique. Morbi at velit vel lectus porta suscipit. Maecenas in felis ligula, vel adipiscing lectus. Nulla facilisi. Etiam aliquet fermentum tellus nec feugiat. Nam sit amet dui orci, ac consequat ipsum.
</p>
<p>
Etiam pretium blandit neque in tempor. Nullam facilisis suscipit nunc in posuere. Sed erat urna, dictum facilisis tempor at, consequat eu elit. Sed et nisi ligula. Sed feugiat orci vel ipsum fringilla tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras interdum sodales ante, auctor rhoncus massa convallis in. Nullam sit amet est metus. Pellentesque molestie arcu consectetur augue varius lobortis. Integer accumsan porttitor libero in ultricies. Duis velit nulla, blandit id facilisis vitae, pretium quis justo. Aenean quam ligula, iaculis eget ullamcorper dapibus, ultrices consectetur mauris. Aenean vestibulum magna at magna porttitor accumsan.
</p>
<p>
Nulla facilisi. Quisque eu interdum neque. Vivamus ultricies facilisis ipsum ut imperdiet. Cras in lacus a magna rutrum tempor. Vivamus placerat urna at nisi cursus egestas. Fusce dictum pharetra ullamcorper. Maecenas iaculis magna orci. Sed ac augue dapibus purus viverra dictum. Aenean vulputate pharetra imperdiet. Proin nec neque ac arcu cursus congue. Sed nec turpis lorem. Phasellus id mauris libero, eu blandit tortor. Cras accumsan turpis semper diam adipiscing in egestas nibh adipiscing. Etiam tincidunt arcu quis lorem laoreet tincidunt id sed est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nisl quam, rutrum vitae pulvinar vel, elementum eget magna. Etiam luctus metus quis felis porta interdum.
</p>
<p>
Quisque faucibus molestie libero nec viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum facilisis tincidunt urna, in blandit magna gravida nec. Nunc eros nisl, venenatis et tempor a, congue eu leo. Praesent vel lacus diam, ac imperdiet orci. Integer faucibus condimentum adipiscing. Sed quam massa, facilisis ut malesuada vulputate, faucibus sed nisi. Ut eu mattis odio. Duis a porttitor tortor. Maecenas vel arcu dui. Maecenas feugiat, elit vitae suscipit placerat, metus libero auctor felis, a dictum dolor massa ut nisl. Nunc fermentum blandit augue vitae imperdiet. Sed cursus tempus pellentesque. Nunc feugiat commodo justo, vitae vulputate risus dictum sed. Duis gravida tincidunt auctor. Suspendisse in est metus, nec rutrum erat.
</p>
<p>
In tempor feugiat massa non malesuada. Donec a nisi sit amet arcu laoreet tincidunt. Mauris vel dui erat. Donec volutpat massa ac risus mollis eget vestibulum risus pretium. In tempus mauris sodales libero gravida nec auctor dolor suscipit. Curabitur imperdiet vehicula mollis. Aenean neque arcu, accumsan non feugiat non, blandit vestibulum elit. Sed porta, metus quis cursus sagittis, magna tortor gravida nulla, ac imperdiet libero odio eget risus. Sed nisi velit, laoreet ut pulvinar vel, feugiat euismod justo. Etiam accumsan gravida nulla id suscipit. Suspendisse a lacus ut metus eleifend consequat a in ipsum. Sed consequat sapien quis odio sagittis ac pulvinar libero bibendum.
</p>
<p>
Etiam pretium blandit neque in tempor. Nullam facilisis suscipit nunc in posuere. Sed erat urna, dictum facilisis tempor at, consequat eu elit. Sed et nisi ligula. Sed feugiat orci vel ipsum fringilla tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras interdum sodales ante, auctor rhoncus massa convallis in. Nullam sit amet est metus. Pellentesque molestie arcu consectetur augue varius lobortis. Integer accumsan porttitor libero in ultricies. Duis velit nulla, blandit id facilisis vitae, pretium quis justo. Aenean quam ligula, iaculis eget ullamcorper dapibus, ultrices consectetur mauris. Aenean vestibulum magna at magna porttitor accumsan.
</p>
<p>
Nulla facilisi. Quisque eu interdum neque. Vivamus ultricies facilisis ipsum ut imperdiet. Cras in lacus a magna rutrum tempor. Vivamus placerat urna at nisi cursus egestas. Fusce dictum pharetra ullamcorper. Maecenas iaculis magna orci. Sed ac augue dapibus purus viverra dictum. Aenean vulputate pharetra imperdiet. Proin nec neque ac arcu cursus congue. Sed nec turpis lorem. Phasellus id mauris libero, eu blandit tortor. Cras accumsan turpis semper diam adipiscing in egestas nibh adipiscing. Etiam tincidunt arcu quis lorem laoreet tincidunt id sed est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nisl quam, rutrum vitae pulvinar vel, elementum eget magna. Etiam luctus metus quis felis porta interdum.
</p>
<p>
Quisque faucibus molestie libero nec viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum facilisis tincidunt urna, in blandit magna gravida nec. Nunc eros nisl, venenatis et tempor a, congue eu leo. Praesent vel lacus diam, ac imperdiet orci. Integer faucibus condimentum adipiscing. Sed quam massa, facilisis ut malesuada vulputate, faucibus sed nisi. Ut eu mattis odio. Duis a porttitor tortor. Maecenas vel arcu dui. Maecenas feugiat, elit vitae suscipit placerat, metus libero auctor felis, a dictum dolor massa ut nisl. Nunc fermentum blandit augue vitae imperdiet. Sed cursus tempus pellentesque. Nunc feugiat commodo justo, vitae vulputate risus dictum sed. Duis gravida tincidunt auctor. Suspendisse in est metus, nec rutrum erat.
</p>
<p>
In tempor feugiat massa non malesuada. Donec a nisi sit amet arcu laoreet tincidunt. Mauris vel dui erat. Donec volutpat massa ac risus mollis eget vestibulum risus pretium. In tempus mauris sodales libero gravida nec auctor dolor suscipit. Curabitur imperdiet vehicula mollis. Aenean neque arcu, accumsan non feugiat non, blandit vestibulum elit. Sed porta, metus quis cursus sagittis, magna tortor gravida nulla, ac imperdiet libero odio eget risus. Sed nisi velit, laoreet ut pulvinar vel, feugiat euismod justo. Etiam accumsan gravida nulla id suscipit. Suspendisse a lacus ut metus eleifend consequat a in ipsum. Sed consequat sapien quis odio sagittis ac pulvinar libero bibendum.
</p>
<p>
Etiam pretium blandit neque in tempor. Nullam facilisis suscipit nunc in posuere. Sed erat urna, dictum facilisis tempor at, consequat eu elit. Sed et nisi ligula. Sed feugiat orci vel ipsum fringilla tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras interdum sodales ante, auctor rhoncus massa convallis in. Nullam sit amet est metus. Pellentesque molestie arcu consectetur augue varius lobortis. Integer accumsan porttitor libero in ultricies. Duis velit nulla, blandit id facilisis vitae, pretium quis justo. Aenean quam ligula, iaculis eget ullamcorper dapibus, ultrices consectetur mauris. Aenean vestibulum magna at magna porttitor accumsan.
</p>
<p>
Nulla facilisi. Quisque eu interdum neque. Vivamus ultricies facilisis ipsum ut imperdiet. Cras in lacus a magna rutrum tempor. Vivamus placerat urna at nisi cursus egestas. Fusce dictum pharetra ullamcorper. Maecenas iaculis magna orci. Sed ac augue dapibus purus viverra dictum. Aenean vulputate pharetra imperdiet. Proin nec neque ac arcu cursus congue. Sed nec turpis lorem. Phasellus id mauris libero, eu blandit tortor. Cras accumsan turpis semper diam adipiscing in egestas nibh adipiscing. Etiam tincidunt arcu quis lorem laoreet tincidunt id sed est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nisl quam, rutrum vitae pulvinar vel, elementum eget magna. Etiam luctus metus quis felis porta interdum.
</p>
<p>
Quisque faucibus molestie libero nec viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum facilisis tincidunt urna, in blandit magna gravida nec. Nunc eros nisl, venenatis et tempor a, congue eu leo. Praesent vel lacus diam, ac imperdiet orci. Integer faucibus condimentum adipiscing. Sed quam massa, facilisis ut malesuada vulputate, faucibus sed nisi. Ut eu mattis odio. Duis a porttitor tortor. Maecenas vel arcu dui. Maecenas feugiat, elit vitae suscipit placerat, metus libero auctor felis, a dictum dolor massa ut nisl. Nunc fermentum blandit augue vitae imperdiet. Sed cursus tempus pellentesque. Nunc feugiat commodo justo, vitae vulputate risus dictum sed. Duis gravida tincidunt auctor. Suspendisse in est metus, nec rutrum erat.
</p>
<p>
In tempor feugiat massa non malesuada. Donec a nisi sit amet arcu laoreet tincidunt. Mauris vel dui erat. Donec volutpat massa ac risus mollis eget vestibulum risus pretium. In tempus mauris sodales libero gravida nec auctor dolor suscipit. Curabitur imperdiet vehicula mollis. Aenean neque arcu, accumsan non feugiat non, blandit vestibulum elit. Sed porta, metus quis cursus sagittis, magna tortor gravida nulla, ac imperdiet libero odio eget risus. Sed nisi velit, laoreet ut pulvinar vel, feugiat euismod justo. Etiam accumsan gravida nulla id suscipit. Suspendisse a lacus ut metus eleifend consequat a in ipsum. Sed consequat sapien quis odio sagittis ac pulvinar libero bibendum.
</p>

</body>
</html>

	<!DOCTYPE html>
	<html lang="nl">
	<head>
	<meta charset="utf-8" />

	<title>Plakkende Div</title>

	<script>
	window.onload = function () {
	window.onscroll = function () {
	var doc = document.body,
	scrollPosition = doc.scrollTop,
	pageSize = (doc.scrollHeight - doc.clientHeight),
	percentageScrolled = Math.floor( (scrollPosition / pageSize) * 100);

	if (percentageScrolled < 50) {
	document.getElementById('menu').style.backgroundColor='green';
	document.getElementById('menu').style.position='relative';
	}

	if (percentageScrolled >= 50) {
	document.getElementById('menu').style.backgroundColor='#FF0000';
	document.getElementById('menu').style.position='fixed';
	}
	};
	};
	</script>
	</head>

	<body>

	<div id="menu">
	<ul>
	<li>Link</li>
	<li>Link</li>
	<li>Link</li>
	<li>Link</li>
	<li>Link</li>
	</ul>
	</div>

	<p>
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla odio vel nisi dapibus consectetur. Donec nec quam nulla. Cras at felis vitae tortor sodales blandit. Pellentesque vitae dapibus lectus. In scelerisque sollicitudin augue, consequat fermentum enim pharetra ac. Vestibulum purus ligula, egestas id cursus id, sodales sed libero. Cras nulla massa, iaculis eget mattis sit amet, posuere id nisi. Duis sit amet augue lectus, ac tempor elit. Mauris et nunc orci. Aenean tristique, turpis et cursus rutrum, purus nunc auctor felis, pretium elementum elit nulla id sapien. Duis eleifend libero a justo porta id porttitor lacus tristique. Morbi at velit vel lectus porta suscipit. Maecenas in felis ligula, vel adipiscing lectus. Nulla facilisi. Etiam aliquet fermentum tellus nec feugiat. Nam sit amet dui orci, ac consequat ipsum.
	</p>
	<p>
	Etiam pretium blandit neque in tempor. Nullam facilisis suscipit nunc in posuere. Sed erat urna, dictum facilisis tempor at, consequat eu elit. Sed et nisi ligula. Sed feugiat orci vel ipsum fringilla tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras interdum sodales ante, auctor rhoncus massa convallis in. Nullam sit amet est metus. Pellentesque molestie arcu consectetur augue varius lobortis. Integer accumsan porttitor libero in ultricies. Duis velit nulla, blandit id facilisis vitae, pretium quis justo. Aenean quam ligula, iaculis eget ullamcorper dapibus, ultrices consectetur mauris. Aenean vestibulum magna at magna porttitor accumsan.
	</p>
	<p>
	Nulla facilisi. Quisque eu interdum neque. Vivamus ultricies facilisis ipsum ut imperdiet. Cras in lacus a magna rutrum tempor. Vivamus placerat urna at nisi cursus egestas. Fusce dictum pharetra ullamcorper. Maecenas iaculis magna orci. Sed ac augue dapibus purus viverra dictum. Aenean vulputate pharetra imperdiet. Proin nec neque ac arcu cursus congue. Sed nec turpis lorem. Phasellus id mauris libero, eu blandit tortor. Cras accumsan turpis semper diam adipiscing in egestas nibh adipiscing. Etiam tincidunt arcu quis lorem laoreet tincidunt id sed est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nisl quam, rutrum vitae pulvinar vel, elementum eget magna. Etiam luctus metus quis felis porta interdum.
	</p>
	<p>
	Quisque faucibus molestie libero nec viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum facilisis tincidunt urna, in blandit magna gravida nec. Nunc eros nisl, venenatis et tempor a, congue eu leo. Praesent vel lacus diam, ac imperdiet orci. Integer faucibus condimentum adipiscing. Sed quam massa, facilisis ut malesuada vulputate, faucibus sed nisi. Ut eu mattis odio. Duis a porttitor tortor. Maecenas vel arcu dui. Maecenas feugiat, elit vitae suscipit placerat, metus libero auctor felis, a dictum dolor massa ut nisl. Nunc fermentum blandit augue vitae imperdiet. Sed cursus tempus pellentesque. Nunc feugiat commodo justo, vitae vulputate risus dictum sed. Duis gravida tincidunt auctor. Suspendisse in est metus, nec rutrum erat.
	</p>
	<p>
	In tempor feugiat massa non malesuada. Donec a nisi sit amet arcu laoreet tincidunt. Mauris vel dui erat. Donec volutpat massa ac risus mollis eget vestibulum risus pretium. In tempus mauris sodales libero gravida nec auctor dolor suscipit. Curabitur imperdiet vehicula mollis. Aenean neque arcu, accumsan non feugiat non, blandit vestibulum elit. Sed porta, metus quis cursus sagittis, magna tortor gravida nulla, ac imperdiet libero odio eget risus. Sed nisi velit, laoreet ut pulvinar vel, feugiat euismod justo. Etiam accumsan gravida nulla id suscipit. Suspendisse a lacus ut metus eleifend consequat a in ipsum. Sed consequat sapien quis odio sagittis ac pulvinar libero bibendum.
	</p>
	<p>
	Etiam pretium blandit neque in tempor. Nullam facilisis suscipit nunc in posuere. Sed erat urna, dictum facilisis tempor at, consequat eu elit. Sed et nisi ligula. Sed feugiat orci vel ipsum fringilla tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras interdum sodales ante, auctor rhoncus massa convallis in. Nullam sit amet est metus. Pellentesque molestie arcu consectetur augue varius lobortis. Integer accumsan porttitor libero in ultricies. Duis velit nulla, blandit id facilisis vitae, pretium quis justo. Aenean quam ligula, iaculis eget ullamcorper dapibus, ultrices consectetur mauris. Aenean vestibulum magna at magna porttitor accumsan.
	</p>
	<p>
	Nulla facilisi. Quisque eu interdum neque. Vivamus ultricies facilisis ipsum ut imperdiet. Cras in lacus a magna rutrum tempor. Vivamus placerat urna at nisi cursus egestas. Fusce dictum pharetra ullamcorper. Maecenas iaculis magna orci. Sed ac augue dapibus purus viverra dictum. Aenean vulputate pharetra imperdiet. Proin nec neque ac arcu cursus congue. Sed nec turpis lorem. Phasellus id mauris libero, eu blandit tortor. Cras accumsan turpis semper diam adipiscing in egestas nibh adipiscing. Etiam tincidunt arcu quis lorem laoreet tincidunt id sed est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nisl quam, rutrum vitae pulvinar vel, elementum eget magna. Etiam luctus metus quis felis porta interdum.
	</p>
	<p>
	Quisque faucibus molestie libero nec viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum facilisis tincidunt urna, in blandit magna gravida nec. Nunc eros nisl, venenatis et tempor a, congue eu leo. Praesent vel lacus diam, ac imperdiet orci. Integer faucibus condimentum adipiscing. Sed quam massa, facilisis ut malesuada vulputate, faucibus sed nisi. Ut eu mattis odio. Duis a porttitor tortor. Maecenas vel arcu dui. Maecenas feugiat, elit vitae suscipit placerat, metus libero auctor felis, a dictum dolor massa ut nisl. Nunc fermentum blandit augue vitae imperdiet. Sed cursus tempus pellentesque. Nunc feugiat commodo justo, vitae vulputate risus dictum sed. Duis gravida tincidunt auctor. Suspendisse in est metus, nec rutrum erat.
	</p>
	<p>
	In tempor feugiat massa non malesuada. Donec a nisi sit amet arcu laoreet tincidunt. Mauris vel dui erat. Donec volutpat massa ac risus mollis eget vestibulum risus pretium. In tempus mauris sodales libero gravida nec auctor dolor suscipit. Curabitur imperdiet vehicula mollis. Aenean neque arcu, accumsan non feugiat non, blandit vestibulum elit. Sed porta, metus quis cursus sagittis, magna tortor gravida nulla, ac imperdiet libero odio eget risus. Sed nisi velit, laoreet ut pulvinar vel, feugiat euismod justo. Etiam accumsan gravida nulla id suscipit. Suspendisse a lacus ut metus eleifend consequat a in ipsum. Sed consequat sapien quis odio sagittis ac pulvinar libero bibendum.
	</p>
	<p>
	Etiam pretium blandit neque in tempor. Nullam facilisis suscipit nunc in posuere. Sed erat urna, dictum facilisis tempor at, consequat eu elit. Sed et nisi ligula. Sed feugiat orci vel ipsum fringilla tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras interdum sodales ante, auctor rhoncus massa convallis in. Nullam sit amet est metus. Pellentesque molestie arcu consectetur augue varius lobortis. Integer accumsan porttitor libero in ultricies. Duis velit nulla, blandit id facilisis vitae, pretium quis justo. Aenean quam ligula, iaculis eget ullamcorper dapibus, ultrices consectetur mauris. Aenean vestibulum magna at magna porttitor accumsan.
	</p>
	<p>
	Nulla facilisi. Quisque eu interdum neque. Vivamus ultricies facilisis ipsum ut imperdiet. Cras in lacus a magna rutrum tempor. Vivamus placerat urna at nisi cursus egestas. Fusce dictum pharetra ullamcorper. Maecenas iaculis magna orci. Sed ac augue dapibus purus viverra dictum. Aenean vulputate pharetra imperdiet. Proin nec neque ac arcu cursus congue. Sed nec turpis lorem. Phasellus id mauris libero, eu blandit tortor. Cras accumsan turpis semper diam adipiscing in egestas nibh adipiscing. Etiam tincidunt arcu quis lorem laoreet tincidunt id sed est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nisl quam, rutrum vitae pulvinar vel, elementum eget magna. Etiam luctus metus quis felis porta interdum.
	</p>
	<p>
	Quisque faucibus molestie libero nec viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum facilisis tincidunt urna, in blandit magna gravida nec. Nunc eros nisl, venenatis et tempor a, congue eu leo. Praesent vel lacus diam, ac imperdiet orci. Integer faucibus condimentum adipiscing. Sed quam massa, facilisis ut malesuada vulputate, faucibus sed nisi. Ut eu mattis odio. Duis a porttitor tortor. Maecenas vel arcu dui. Maecenas feugiat, elit vitae suscipit placerat, metus libero auctor felis, a dictum dolor massa ut nisl. Nunc fermentum blandit augue vitae imperdiet. Sed cursus tempus pellentesque. Nunc feugiat commodo justo, vitae vulputate risus dictum sed. Duis gravida tincidunt auctor. Suspendisse in est metus, nec rutrum erat.
	</p>
	<p>
	In tempor feugiat massa non malesuada. Donec a nisi sit amet arcu laoreet tincidunt. Mauris vel dui erat. Donec volutpat massa ac risus mollis eget vestibulum risus pretium. In tempus mauris sodales libero gravida nec auctor dolor suscipit. Curabitur imperdiet vehicula mollis. Aenean neque arcu, accumsan non feugiat non, blandit vestibulum elit. Sed porta, metus quis cursus sagittis, magna tortor gravida nulla, ac imperdiet libero odio eget risus. Sed nisi velit, laoreet ut pulvinar vel, feugiat euismod justo. Etiam accumsan gravida nulla id suscipit. Suspendisse a lacus ut metus eleifend consequat a in ipsum. Sed consequat sapien quis odio sagittis ac pulvinar libero bibendum.
	</p>

	</body>
	</html>