<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<meta http-equiv="Content-Type" content="application/xhtml; charset=utf-8" />
<title></title>
<style type="text/css">
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
position: relative;
}
#contenedor {
width: 750px;
height: auto;
margin: 0 auto;
}
.izq {
width: 500px;
height: auto;
background-color: orange;
float: left;
position: relative;
top: 100px;
}
#cont_fijar {
float: left;
}
#fijar {
width: 200px;
height: 200px;
position: relative;
top: 100px;
border: 1px solid red;
}
</style>
<script type="text/javascript">
function GetZoomFactor () {
var factor = 1;
if (document.body.getBoundingClientRect) {
// rect is only in physical pixel size in IE before version 8
var rect = document.body.getBoundingClientRect ();
var physicalW = rect.right - rect.left;
var logicalW = document.body.offsetWidth;
// the zoom level is always an integer percent value
factor = Math.round ((physicalW / logicalW) * 100) / 100;
}
return factor;
}
function fnc() {
var info = document.getElementById ("fijar");
info.innerHTML = "Horizontal: " + window.pageXOffset + "px<br/>Vertical: " + window.pageYOffset + "px";
if ('pageXOffset' in window) { // todos excepto ie8-
if (window.pageYOffset >= 100) {
info.style.position = 'fixed';
info.style.top = 0;
} else {
info.style.position = 'relative';
info.style.top = '100px';
}
}else {
var zoomFactor = GetZoomFactor ();
var scrollTop = Math.round (document.documentElement.scrollTop / zoomFactor);
if (scrollTop >= 100) {
info.style.position = 'fixed';
info.style.top = 0;
} else {
info.style.position = 'relative';
info.style.top = '100px';
}
}
}
window.onscroll = function() {fnc();};
</script>
</head>
<body>
<div id="contenedor">
<div class="izq">
Suspendisse potenti. Praesent ut risus ligula, quis ultrices libero. Sed faucibus leo vitae tortor tincidunt eget pulvinar nulla suscipit. Vestibulum eget libero metus, sit amet iaculis ante. Curabitur sed ligula dolor. Aliquam erat volutpat. Cras sit amet ligula dolor, a eleifend sapien. Nam lobortis turpis nec nisl tempor sit amet malesuada diam luctus.
<br /><br /><br /><br /><br /><br /><br /><br />
Suspendisse potenti. Praesent ut risus ligula, quis ultrices libero. Sed faucibus leo vitae tortor tincidunt eget pulvinar nulla suscipit. Vestibulum eget libero metus, sit amet iaculis ante. Curabitur sed ligula dolor. Aliquam erat volutpat. Cras sit amet ligula dolor, a eleifend sapien. Nam lobortis turpis nec nisl tempor sit amet malesuada diam luctus.
<br /><br /><br /><br /><br /><br /><br /><br />
Suspendisse potenti. Praesent ut risus ligula, quis ultrices libero. Sed faucibus leo vitae tortor tincidunt eget pulvinar nulla suscipit. Vestibulum eget libero metus, sit amet iaculis ante. Curabitur sed ligula dolor. Aliquam erat volutpat. Cras sit amet ligula dolor, a eleifend sapien. Nam lobortis turpis nec nisl tempor sit amet malesuada diam luctus.
<br /><br /><br /><br /><br /><br /><br /><br />
Suspendisse potenti. Praesent ut risus ligula, quis ultrices libero. Sed faucibus leo vitae tortor tincidunt eget pulvinar nulla suscipit. Vestibulum eget libero metus, sit amet iaculis ante. Curabitur sed ligula dolor. Aliquam erat volutpat. Cras sit amet ligula dolor, a eleifend sapien. Nam lobortis turpis nec nisl tempor sit amet malesuada diam luctus.
<br /><br /><br /><br /><br /><br /><br /><br />
Suspendisse potenti. Praesent ut risus ligula, quis ultrices libero. Sed faucibus leo vitae tortor tincidunt eget pulvinar nulla suscipit. Vestibulum eget libero metus, sit amet iaculis ante. Curabitur sed ligula dolor. Aliquam erat volutpat. Cras sit amet ligula dolor, a eleifend sapien. Nam lobortis turpis nec nisl tempor sit amet malesuada diam luctus.
<br /><br /><br /><br /><br /><br /><br /><br />
Suspendisse potenti. Praesent ut risus ligula, quis ultrices libero. Sed faucibus leo vitae tortor tincidunt eget pulvinar nulla suscipit. Vestibulum eget libero metus, sit amet iaculis ante. Curabitur sed ligula dolor. Aliquam erat volutpat. Cras sit amet ligula dolor, a eleifend sapien. Nam lobortis turpis nec nisl tempor sit amet malesuada diam luctus.
</div>
<div id="cont_fijar">
<div id="fijar"></div>
</div>
</div>
</body>
</html>