Hola, me estoy devanando los sesos para intentar ayudarte, pero no hay forma de conseguirlo.
El script que he hecho hace que el menu lateral que creo se desvanezca al hacer sroll y se desplace y reaparezca. Pero lo hace de forma arbitraria, a veces si, a veces no. Algún problema con los retardos. Tampoco consigo hacer que el texto aumente o disminuya.
Este es el código que he hecho. Seguro que alguien experto en el tema puede depurarlo para conseguir que funcione. Yo ya estoy que echo humo jejeje
Código HTML:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<style type="text/css">
<!--
#contenido {
float:left;
width: 80%;
font-size: 16px;
}
#menu {
position:relative;
float:left;
width: 20%;
}
#menuFlotante {
position:absolute;
top: 10px;
background-color:#CCCCFF;
}
-->
</style>
<script type="text/javascript">
var old = 10 // posición superior inicial de menu
var opacidad = 10 // opacidad inicial de menu
var intervalo, temporizador // temporizadores
var miMenu = null // vble para referenciar al menu
function init() { // Función de inicialización
miMenu = new getObj("menuFlotante")
miContenido = new getObj("contenido")
window.onscroll = function() {
temporizador = setTimeout("reMostrarMenu()", 1000) // Ejecutar en 1 segundo la función reMostrarMenu()
}
}
function getObj(name) // Obtención de referencia a nodo de id=name
{
if (document.getElementById)
{
this.obj = document.getElementById(name);
this.style = document.getElementById(name).style;
}
else if (document.all)
{
this.obj = document.all[name];
this.style = document.all[name].style;
}
else if (document.layers)
{
this.obj = getObjNN4(document,name);
this.style = this.obj;
}
}
function reMostrarMenu () {
intervalo = setInterval("fadeOut()", 50) // Ejecutar función fadeOut() a intervalos de 50ms
clearTimeout(temporizador)
}
function fadeOut () { // Esta función desvanece el menu
setOpacity(miMenu, opacidad)
opacidad--
if (opacidad <= 0) { // Si se llega a visibilidad 0...
clearInterval(intervalo) // ... parar de desvanecer
desplazaMenu() // ... llamar a desplazamiento de menu
intervalo = setInterval("fadeIn()", 50) // ... crear el intervalo que hará reaparecer el menu
}
}
function fadeIn () { // Función que hace reaparecer menu
setOpacity(miMenu, opacidad)
opacidad++
if (opacidad >= 10) {
clearInterval(intervalo) // Una vez alcanzada opacidad total, parar el proceso de reaparición
}
}
function desplazaMenu() { // Recoloca el menu en función de la posición de scroll actual
if (window.innerHeight) {
pos = window.pageYOffset
} else if (document.documentElement && document.documentElement.scrollTop) {
pos = document.documentElement.scrollTop
} else if (document.body) {
pos = document.body.scrollTop
}
if (pos < 10)
pos = 10
else pos += 10
if (pos == old) miMenu.style.top = pos + 'px'
old = pos
}
function setOpacity(elemento, value) { // Función que aplica opacidad
elemento.style.opacity = value/10;
elemento.style.filter = 'alpha(opacity=' + value*10 + ')';
}
function tamanyo(op) { // Función para cambiar el tamaño de la fuente
var miContenido = document.getElementById("contenido")
var medidaActual = parseInt(miContenido.style.fontSize)
switch (op) {
case '+': miContenido.style.fontSize = (medidaActual + 1) + "px"
break
case '-': miContenido.style.fontSize = (medidaActual - 1) + "px"
}
}
</script>
</head>
<body onload="init()">
<div id="contenido">
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis elementum.
Aliquam erat volutpat. Pellentesque facilisis ligula quis ante. In ullamcorper
vulputate urna. Ut condimentum quam id nisl condimentum scelerisque. Cras
nunc. Vestibulum ac nunc. Cras turpis lectus, convallis id, imperdiet eu,
ultrices a, diam. Suspendisse potenti. Duis ligula elit, pulvinar quis,
viverra vel, pulvinar eget, nisi. Quisque accumsan tincidunt tellus. Cras
velit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Aenean nibh dolor, euismod ut, auctor non, molestie non,
sem. Quisque luctus, mi faucibus dapibus placerat, enim turpis commodo
diam, et ultricies odio purus nec augue. Ut volutpat nulla in lorem. Pellentesque
nec sapien. </p>
<p>Nullam at metus quis enim tempus egestas. Nulla facilisi. Duis rutrum
enim ut dolor. Maecenas nibh magna, blandit at, malesuada pulvinar, ultricies
vel, arcu. Etiam eu purus. Sed faucibus orci sed enim. Integer lacus lectus,
imperdiet non, consectetuer quis, scelerisque ac, nisi. Praesent sapien
nulla, semper eu, semper a, condimentum sed, velit. Vestibulum mollis,
mauris ut rutrum adipiscing, augue orci imperdiet ipsum, in molestie elit
lectus sed ipsum. Pellentesque habitant morbi tristique senectus et netus
et malesuada fames ac turpis egestas. Nunc vestibulum, velit suscipit commodo
tempor, leo pede tincidunt risus, ut congue quam tellus ut velit. In iaculis,
neque vitae fermentum fermentum, ante velit consequat turpis, vel rutrum
turpis tellus et mi. Donec massa nisi, commodo eu, rhoncus nec, rhoncus
sit amet, nibh. Morbi facilisis pharetra dolor. Ut venenatis. </p>
<p>Maecenas sit amet velit ac dolor aliquam varius. In in neque nec odio
mattis aliquam. Vivamus tellus leo, semper at, vestibulum sed, congue eget,
massa. Class aptent taciti sociosqu ad litora torquent per conubia nostra,
per inceptos hymenaeos. Nullam fermentum dignissim nibh. Maecenas nulla.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
inceptos hymenaeos. Sed turpis justo, ultrices et, gravida non, volutpat
et, sapien. Nullam magna. Vestibulum eu risus vitae justo fermentum dignissim. </p>
<p>Ut leo nisi, facilisis sit amet, ullamcorper in, semper in, massa. Aliquam
orci mi, laoreet sed, varius sed, ultricies eu, leo. Nulla imperdiet eros
id orci. Curabitur non mauris. Sed ut lectus et justo pharetra faucibus.
Nullam nisi. Sed ornare mollis mauris. Donec sagittis lorem tristique tellus.
Nulla nunc mauris, bibendum non, aliquam eu, rhoncus et, augue. Vestibulum
sed odio. Ut facilisis lorem at justo. Vestibulum sem. Aliquam elementum,
nisi vitae tristique auctor, sapien libero egestas metus, et tempor sapien
diam et ligula. Praesent malesuada adipiscing leo. In hac habitasse platea
dictumst. Proin semper mattis massa. Phasellus molestie. </p>
<p>Cras varius molestie nisi. Sed diam lacus, luctus eu, iaculis eget, dictum
nec, diam. Vivamus laoreet tristique quam. Ut non nisl non lectus molestie
egestas. Phasellus et felis. Nam nec massa. Morbi et nisl. Ut aliquam.
Proin imperdiet aliquet diam. Integer a mi. Aliquam in justo. Cras condimentum
lacus ac ante. Nulla rhoncus leo et nunc lacinia eleifend. Nulla facilisi.
Fusce ac nisi. Aliquam nulla tellus, accumsan vel, malesuada vel, aliquam
sit amet, lacus. Maecenas metus enim, dignissim quis, aliquet eu, porta
eget, magna. In hac habitasse platea dictumst. </p>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut varius.
Donec nonummy. Quisque tempus. Fusce sit amet lorem sit amet velit congue
ornare. Nam non felis non dolor ultricies aliquet. Donec rutrum. Etiam
condimentum egestas metus. Nunc elit elit, tincidunt non, faucibus sit
amet, rutrum a, nibh. Vestibulum non tortor ut nibh sollicitudin scelerisque.
Maecenas eu nulla in quam tristique ultrices. Vestibulum posuere, lorem
non porta condimentum, diam velit gravida enim, non lobortis urna odio
eget nulla. Aenean pulvinar. </p>
<p>Duis a urna. Sed in enim. Pellentesque sit amet dui. Maecenas elementum
est id justo. Nam velit leo, ultrices vitae, ullamcorper eleifend, iaculis
vitae, mi. Etiam congue. Quisque ultricies feugiat tellus. Pellentesque
non neque eu orci volutpat mattis. In nec erat. Vestibulum volutpat arcu
ut dolor. Suspendisse facilisis arcu eleifend quam. </p>
<p>Aliquam posuere massa ut odio. Mauris cursus nulla euismod magna. Morbi
dui. Sed porttitor. Nulla aliquam risus in tellus. Fusce vestibulum,
risus vitae hendrerit suscipit, ligula mauris cursus tortor, et vulputate
justo eros in risus. Integer a eros non urna aliquet imperdiet. Nullam
tincidunt magna eget nisl. Integer imperdiet nibh id tellus lobortis
facilisis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Vestibulum vel mauris. Sed auctor volutpat nunc. Duis quis diam. </p>
<p>Mauris hendrerit arcu ac tellus. Proin interdum tortor in ante. Mauris
sed augue eu elit scelerisque aliquam. Donec sodales. Etiam ut risus.
Mauris vel massa. Cras nec leo. Integer eros. Aenean iaculis. Morbi at
augue. Donec varius. Phasellus orci. Quisque blandit diam. </p>
</div>
<div id="menu">
<div id="menuFlotante">
<ul>
<li><a href="javascript:tamanyo('+')">texto [+]</a></li>
<li><a href="javascript:tamanyo('-')">texto [-]</a></li>
</ul>
</div>
</div>
</body>
</html>