Hi, I'm trying to use a HTML code to make a Glossary, the idea is a bar with the alphabet that always remains visible in the top of the page (or anywhere) no matter where in the glossary am I. I tested the code outside the Confluence and works fine, but when I put inside HTML-bobswift Macro and deploy to Confluence, the code doesn't works as expected, the bar always hide one line above the letter a selected. Is there a way to keep an element or section visible on screen no matter I do scroll? I can do the glossary with tabs macros, because tabs labels always remains visible, but is not what I'm looking for.
My HTML code is:
<!DOCTYPE html>
<html>
<head>
<title>Glosario de Términos</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
#header {
background-color: #f0f0f0;
padding: 10px;
}
#menu-bar {
background-color: #f0f0f0;
white-space: nowrap;
overflow-x: auto;
display: flex;
}
.index-button {
width: 30px;
height: 30px;
cursor: pointer;
margin: 5px;
}
.index-button:hover {
text-decoration: underline;
}
#content {
padding: 20px;
flex-grow: 1;
overflow-y: auto;
max-height: calc(100vh - 80px); /* Resta el tamaño del encabezado y la barra de menú */
}
</style>
</head>
<body>
<div id="header">
<h1>Glosario de Términos</h1>
</div>
<div id="menu-bar">
<button class="index-button" onclick="scrollToLetter('#')">#</button>
<button class="index-button" onclick="scrollToLetter('A')">A</button>
<button class="index-button" onclick="scrollToLetter('B')">B</button>
<button class="index-button" onclick="scrollToLetter('C')">C</button>
<button class="index-button" onclick="scrollToLetter('D')">D</button>
<button class="index-button" onclick="scrollToLetter('E')">E</button>
<button class="index-button" onclick="scrollToLetter('F')">F</button>
<button class="index-button" onclick="scrollToLetter('G')">G</button>
<button class="index-button" onclick="scrollToLetter('H')">H</button>
<button class="index-button" onclick="scrollToLetter('I')">I</button>
<button class="index-button" onclick="scrollToLetter('J')">J</button>
<button class="index-button" onclick="scrollToLetter('K')">K</button>
<button class="index-button" onclick="scrollToLetter('L')">L</button>
<button class="index-button" onclick="scrollToLetter('M')">M</button>
<button class="index-button" onclick="scrollToLetter('N')">N</button>
<button class="index-button" onclick="scrollToLetter('O')">O</button>
<button class="index-button" onclick="scrollToLetter('P')">P</button>
<button class="index-button" onclick="scrollToLetter('Q')">Q</button>
<button class="index-button" onclick="scrollToLetter('R')">R</button>
<button class="index-button" onclick="scrollToLetter('S')">S</button>
<button class="index-button" onclick="scrollToLetter('T')">T</button>
<button class="index-button" onclick="scrollToLetter('U')">U</button>
<button class="index-button" onclick="scrollToLetter('V')">V</button>
<button class="index-button" onclick="scrollToLetter('W')">W</button>
<button class="index-button" onclick="scrollToLetter('X')">X</button>
<button class="index-button" onclick="scrollToLetter('Y')">Y</button>
<button class="index-button" onclick="scrollToLetter('Z')">Z</button>
</div>
<div id="content">
<h2 id="#">#</h2>
<p>Texto relacionado con términos que comienzan con #.</p>
<h2 id="A">A</h2>
<p>Texto relacionado con términos que comienzan con A.</p>
<h2 id="B">B</h2>
<p>Texto relacionado con términos que comienzan con B.</p>
<h2 id="C">C</h2>
<p>Texto relacionado con términos que comienzan con C.</p>
<h2 id="D">D</h2>
<p>Texto relacionado con términos que comienzan con D.</p>
<h2 id="E">E</h2>
<p>Texto relacionado con términos que comienzan con E.</p>
<h2 id="F">F</h2>
<p>Texto relacionado con términos que comienzan con F.</p>
<h2 id="G">G</h2>
<p>Texto relacionado con términos que comienzan con G.</p>
<h2 id="H">H</h2>
<p>Texto relacionado con términos que comienzan con H.</p>
<h2 id="I">I</h2>
<p>Texto relacionado con términos que comienzan con I.</p>
<h2 id="J">J</h2>
<p>Texto relacionado con términos que comienzan con J.</p>
<h2 id="K">K</h2>
<p>Texto relacionado con términos que comienzan con K.</p>
<h2 id="L">L</h2>
<p>Texto relacionado con términos que comienzan con L.</p>
<h2 id="M">M</h2>
<p>Texto relacionado con términos que comienzan con M.</p>
<h2 id="N">N</h2>
<p>Texto relacionado con términos que comienzan con N.</p>
<h2 id="O">O</h2>
<p>Texto relacionado con términos que comienzan con O.</p>
<h2 id="P">P</h2>
<p>Texto relacionado con términos que comienzan con P.</p>
<h2 id="Q">Q</h2>
<p>Texto relacionado con términos que comienzan con Q.</p>
<h2 id="R">R</h2>
<p>Texto relacionado con términos que comienzan con R.</p>
<h2 id="S">S</h2>
<p>Texto relacionado con términos que comienzan con S.</p>
<h2 id="T">T</h2>
<p>Texto relacionado con términos que comienzan con T.</p>
<h2 id="U">U</h2>
<p>Texto relacionado con términos que comienzan con U.</p>
<h2 id="V">V</h2>
<p>Texto relacionado con términos que comienzan con V.</p>
<h2 id="W">W</h2>
<p>Texto relacionado con términos que comienzan con W.</p>
<h2 id="X">X</h2>
<p>Texto relacionado con términos que comienzan con X.</p>
<h2 id="Y">Y</h2>
<p>Texto relacionado con términos que comienzan con Y.</p>
<h2 id="Z">Z</h2>
<p>Texto relacionado con términos que comienzan con Z.</p>
</div>
<script>
function scrollToLetter(letter) {
const element = document.querySelector(`h2[id='${letter}']`);
if (element) {
element.scrollIntoView({ behavior: "smooth", block: "start" });
}
}
</script>
</body>
</html>
Thanks,
Nico.
