htmlamateur htmlamateur - 6 months ago 11
jQuery Question

create an index with floating header in HTML

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

I need to create a list of games like this but the index (block "List of games") must stay always on top of interface (is not shifted when we click on letter "T", for example). Sothat it is more convenient and faster when we search for different letters. Many thanks ! :)

Answer

CSS file:

.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 File:

  <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>

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