<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
// Evento que se genera cada vez que se mueve el scroll del navegador
$(document).scroll(function(){ // 40 es el valor de la altura del header
// Si aumentas el header, aumenta este valor
if($(document).scrollTop()>40)
{ // Movemos la posición top del css segun el scroll
$("aside").css("top",$(document).scrollTop()-40); }else{ // Movemos a la posición inicial
$("aside").css("top",0); }
});
});
</script>
<style>
body { margin:0 auto;
width:900px;
}
header { border:1px solid #aaa;
margin:10px 0px 10px 0px;
padding:5px;
}
section { border:1px solid #aaa;
float:left;
padding:5px;
width:728px;
}
aside { border:1px solid #aaa;
float:right;
padding:5px;
position:relative;
width:138px;
/* Definimos la transicion */
-webkit-transition: all 0.7s ease;
-moz-transition: all 0.7s ease;
-ms-transition: all 0.7s ease;
-o-transition: all 0.7s ease;
transition: all 0.7s ease;
}
</style>
</head>
<body>
<header>
header
</header>
<section>
Ves al final de la página, el <b>aside</b> te seguira!!!
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</section>
<aside id="#siempreVisible">
<b>aside</b>
<p>Esta parte ira bajando conjuntamente con el scroll de la pagina.</p>
<p>Puedes modificar la velocidad del mismo mediante el transition en
el CSS</p>
</aside>
</body>
</html>
Comentarios sobre la versión: Versión 1 (1)
LO PROBARE, Y DIRE ALGO AL RESPECTO, INICIALMENTE PARECE QUE TIENE QUE FUNCIONAR BIEN...
VICENC
FELICES FIESTAS