<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
body {margin:16px;
font:normal normal 100%/1.4 sans-serif;
}
#sticky {
float:left;
width:140px;
height:auto;
padding:24px;
background:lightblue;
transition:all 2s ease;
}
#conten {
float:right;
width:280px;
height:1800px;
padding:24px;
background:lightgray;
transition:all 2s ease;
}
.sticky {top:0px;
position:fixed;
filter:alpha(opacity=40);
opacity:0.4;
}
</style>
<script type="text/javascript">
window.onload=function() {var left=document.getElementById("sticky");var stop=left.offsetTop;
window.onscroll=function() {var scrollTop=(window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
if (scrollTop >= stop) {left.className="sticky"}else {left.className=""}}
}
</script>
</head>
<body>
<h2>Header Sticky</h2>
<p>Mueve el Scroll ...</p>
<div id="sticky"><h2>Sidenav</h2><hr><p>I n f o</p><p>J o b s</p><p>F o t o</p><p>M a i l</p><hr></div>
<div id="conten"><h2>Contenido</h2><hr><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean fringilla, purus in porttitor pellentesque, erat arcu tincidunt diam, dapibus faucibus leo mauris at sapien. In porttitor vehicula sodales. Vivamus massa neque, facilisis eu felis ut, aliquet convallis nisi. Nam elementum tellus vitae gravida fermentum. Nullam et imperdiet leo. Integer ut euismod lorem, in placerat lacus. Curabitur bibendum arcu ut feugiat commodo. Suspendisse ut mi vel orci ullamcorper tincidunt. Nam vitae fringilla nibh. Nullam hendrerit blandit velit eu hendrerit.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean fringilla, purus in porttitor pellentesque, erat arcu tincidunt diam, dapibus faucibus leo mauris at sapien. In porttitor vehicula sodales. Vivamus massa neque, facilisis eu felis ut, aliquet convallis nisi. Nam elementum tellus vitae gravida fermentum. Nullam et imperdiet leo. Integer ut euismod lorem, in placerat lacus. Curabitur bibendum arcu ut feugiat commodo. Suspendisse ut mi vel orci ullamcorper tincidunt. Nam vitae fringilla nibh. Nullam hendrerit blandit velit eu hendrerit.</p><hr></div>
</body>
</html>
