JavaScript

Sidrullningseffekt

Kodexemplet nedan visar hur du kan skapa ett dokument där ett div-element fixeras högst upp i dokumentet och sedan döljs bakom div-elementet nedanför vid ytterligare sidrullning nedåt.

Detta exempel på hur du kan uppnå effekten saknar viss visuell finess vad gäller upplevelsen... För att sidrullningen ska upplevas som behaglig bör den saktas ner men hur göra det får bli ämnet för en framtida guide.
Vill du ge dig på det direkt kan den här guiden vara till hjälp: Smooth Scrolling without jQuery

demo.html:

<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<style type="text/css">
body{
	margin:0;
	height:2800px;
}

#top{
	width:100%;
	height:200px;
	background-color:yellow;
}

#xnav{
	width:100%;
	height:100px;
	background-color:orange;
}

#middle-header{
	width:100%;
	height:300px;
	background-image:url("divbg.jpg");
}

#mainarea{
	width:100%;
	height:2000px;
	background-color:lime;
}
</style>
<script type="text/javascript">
window.onscroll = function (e) {  
// called when the window is scrolled.

	var doc = document.documentElement;
	var left = (window.pageXOffset || doc.scrollLeft) - (doc.clientLeft || 0);
	var top = (window.pageYOffset || doc.scrollTop)  - (doc.clientTop || 0);
	
	var bgbox = document.getElementById("middle-header");
	
	if(top > 300){
		bgbox.style.position = "fixed";
		bgbox.style.top = "0px";
		bgbox.style.left = "0px";
		bgbox.style.zIndex = "-1";
		document.getElementById("mainarea").style.marginTop = "300px";
	} else {
		bgbox.style.position = "absolute";
		bgbox.style.top = "300px";
		bgbox.style.left = "0px";
	}
}
</script>
</head>
<body>
<div id="top"></div>
<div id="xnav"></div>
<div id="middle-header"></div>
<div id="mainarea"></div>
</body>
</html>

Demo

Mer info:
https://developer.mozilla.org/en-US/docs/Web/Events/scroll
http://stackoverflow.com/questions/3464876/javascript-get-window-x-y-position-for-scroll
http://stackoverflow.com/questions/10605197/detect-if-user-is-scrolling
http://stackoverflow.com/questions/16688545/scroll-div-over-another-div
https://coderwall.com/p/hujlhg/smooth-scrolling-without-jquery

Info om mjuk sidrullning (Smooth scrolling):
Smooth Scrolling without jQuery
http://stackoverflow.com/questions/10063380/javascript-smooth-scroll-without-the-use-of-jquery

Till toppen