Esta mejora se trata de mostrar una lista de puntos en el margen derecho.
Esta lista debe estar visible en cualquier posición de la barra de desplazamiento, lo que se puede conseguir con position:fixed.
Cara punto corresponde con un subtítulo del documento.
Cuando la posición de scroll cambia, se colorean los puntos de tal forma que se pueda diferenciar el punto actual.
Al hacer mouseOver sobre la lista de puntos, éstos se transforman en los títulos originales.
El código utilizado tiene dos partes.
1) Colocar en el evento onScroll la función que lo hace todo
Esta lista debe estar visible en cualquier posición de la barra de desplazamiento, lo que se puede conseguir con position:fixed.
Cara punto corresponde con un subtítulo del documento.
Cuando la posición de scroll cambia, se colorean los puntos de tal forma que se pueda diferenciar el punto actual.
Al hacer mouseOver sobre la lista de puntos, éstos se transforman en los títulos originales.
El código utilizado tiene dos partes.
1) Colocar en el evento onScroll la función que lo hace todo
<script type="text/javascript">
window.onscroll = indiceDelDocumento;
</script>2) La función que lo hace todo:
getDimensions = function(oElement) {
var x, y, w, h;
x = y = w = h = 0;
if (document.getBoxObjectFor) { // Mozilla
var oBox = document.getBoxObjectFor(oElement);
x = oBox.x-1;
w = oBox.width;
y = oBox.y-1;
h = oBox.height;
} else if (oElement.getBoundingClientRect) { // IE
var oRect = oElement.getBoundingClientRect();
x = oRect.left-2;
w = oElement.clientWidth;
y = oRect.top-2;
h = oElement.clientHeight;
}
return {x: x, y: y, w: w, h: h};
}
indiceDelDocumento = function() {
var indice_titulos = document.getElementById('indice_titulos');
indice_titulos.innerHTML = '';
var a = document.getElementById('columna2');
var b = a.getElementsByTagName('h2');
var t=0;
for (var i = 0; i < b.length; i++) {
elem = b[i];
if (getDimensions(elem).y<0)
indice_titulos.innerHTML += '<a href="'+elem.firstChild.getAttribute('href')+
'" style="border-color:red;">'+elem.firstChild.innerHTML+'</a>';
else
indice_titulos.innerHTML += '<a href="'+elem.firstChild.getAttribute('href')+
'">'+elem.firstChild.innerHTML+'</a>';
}
}