создать индекс с плавающим заголовком в HTML

Question

https://fiddle.jshell.net/ka45xgs8/

Мне нужно создать список игр, как это, но индекс (блок «Список игр») должен всегда оставаться на вершине интерфейса (не смещается, когда мы нажмите на букву «Т», например). Sothat удобнее и быстрее, когда мы ищем разные буквы. Большое спасибо ! :)

Answer 1

CSS файл:

.anchor { 
     border:1px solid; 
     padding:10px 0px 10px 10px; 
     position:fixed; 
     width:90%; 
     background-color:#009688; 
     color:#FFFFFF; 
     } 
.anchor a{ 
     color:#FFFFFF; 
    } 
.content > p > a{ 
     color:#009688; 
    } 
.content { 
     margin-top:40px; 
     position:fixed; 
     border: 1px solid; 
     padding-left:10px; 
     width:90%; 
     } 

HTML файла:

<div class="anchor"> 
    <span style='font-size:15pt'>List of games</span> 
     <a href="#go_a">A</a> <a href="#go_b">B</a> 
     <a href="#go_c">C</a>...... 
     <a href="#go_s">S</a> <a href="#go_T">T</a> 
    </div> 
    <br> 
    <div class="content" style="overflow-y: scroll; height:200px;"> 
    <p><a name="go_a"> <b>A</b> <br> 
     Age of Empires <br> 
     Age of Mythology <br> 
     American McGee's Alice <br> 
     Anno 1503 <br> 
     Ark: Survival Evolved</a></p> 

    <p><a name="go_b"><b>B</b><br> 
     Battlefield 1942<br> 
     BioShock <br> 
     Black &amp; White <br> 
     Blade Runner</a></p> 

    <p><a name="go_c"><b>C</b><br> 
     Civilization IV <br> 
     Command &amp; Conquer <br>  
     Cossacks II: Napoleonic Wars <br> 
     Counter-Strike</a></p> 

    <p><a name="go_s"><b>S</b><br> 
     SimCity <br> 
     Spore <br> 
     Star Wars <br> 
     StarCraft <br> 
     Stronghold <br> 
     Supreme Commander</a></p> 

    <p><a name="go_T"><b>T</b><br> 
     The Binding of Isaac <br>  
     The Legend of Sword and Fairy <br> 
     The Sims <br>  
     The Witcher <br> 
     Total Annihilation</a></p> 
    </div> 

Демо: https://fiddle.jshell.net/ka45xgs8/3/

Answer 2

Как и выше, если вы хотите, чтобы элемент оставался в том же положении на странице, независимо от прокрутки и т. Д., Вам нужно указать положение элемента в вашем css.

.anchor { 
border:1px solid; 
padding:10px; 
position: fixed; 
}