Başlık biraz garip oldu daha doğrusu nasıl bir başlık ekleyeceğime tam olarak doğru bir şey bulamadım. StickySectionHeaders anlamı header (sayfanın üstüne) yapışan seçenekler. Blackberry tablet miydi yada iPhone rehberi miydi tama olarak hatırlamıyorum buna benzer bir rehber sistemi vardır. Mesela ‘A’ harfindeki kişileri ararsınız ‘A’ harfi bitene kadar sayfanın en üstünde ‘A’ başlığı yapışkan şekilde durur ve sonraki harfe geçince de sonraki harf sayfanın en üstünde durur ve o harf ile başlayan kişiler sıralanırdı.

Florian Plank  tarafından yapılmış olan StickySectionHeaders uygulaması da buna benzer olarak hazırlanmış ve web sitelerinizde rehber tarzı bir bölüm oluşturabiliyorsunuz. Arkadaşlık siteleri için de oldukça kullanışlı bir örnek ayrıca sitenizdeki kategorileri de bu eklentiye uyarlayıp yazı başlıklarınızı ekleyebilirsiniz.

Kullanım

• Head  etiketleri arasına eklemeniz  gereken bölümler.

Js dosya  adresleri : 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="jquery.stickysectionheaders.js"></script>

 JavaScript : 

  <script>
    $(function(){
      $('#sticky-list').stickySectionHeaders();
    });
  </script>

Stil : 

  <style>

    ul { 
      list-style: none; 
      margin: 0;
      padding: 0;
    }
    #sticky-list  {
      height: 300px;
      overflow: hidden;
      position: relative;
    }

    #sticky-list > ul {
      height: 100%;
      overflow: auto;
    }

    #sticky-list > ul > li strong {
      font-size: 1.5em;
      color: #222;
      background: #ccc;
      display: block;
      padding: 0.5em 10px;
      color: #fff;
      text-shadow: 0px -1px 0px #000;
      opacity: .75;
      background-image: -webkit-gradient(
        linear,
        left top,
        left bottom,
        color-stop(0, #646262),
        color-stop(0.5, #484848),
        color-stop(0.5, #3D3D3D),
        color-stop(1, #4C4C4C)
      );
      background-image: -moz-linear-gradient(
        center top,
        #646262 0%,
        #484848 50%,
        #3D3D3D 50%,
        #4C4C4C 100%
      );
      background-image: linear-gradient(
        center top,
        #646262 0%,
        #484848 50%,
        #3D3D3D 50%,
        #4C4C4C 100%
      );
    }

    #sticky-list > ul > li.sticky strong {
      position: absolute;
      top: 0;
    }

    #sticky-list > ul ul li {
      padding: 1em 10px;
      border-bottom: 1px solid #ccc;
    }

  </style>

•  Body etiketleri arasına eklenmesi gereken bölüm

Html :

        
<div id="sticky-list">
          <ul>
            <li>
              <strong>Section Headline 1</strong>
              <ul>
                <li>Content line</li>
                <li>Content line</li>
                <li>Content line</li>
                <li>Content line</li>
              </ul>
            </li>
            <li>
              <strong>Section Headline 2</strong>
              <ul>
                <li>Content line</li>
                <li>Content line</li>
              </ul>
            </li>
            <li>
              <strong>Section Headline 3</strong>
              <ul>
                <li>Content line</li>
                <li>Content line</li>
                <li>Content line</li>
                <li>Content line</li>
                <li>Content line</li>
                <li>Content line</li>
                <li>Content line</li>
              </ul>
            </li>
            <li>
              <strong>Section Headline 4</strong>
              <ul>
                <li>Content line</li>
                <li>Content line</li>
                <li>Content line</li>
                <li>Content line</li>
              </ul>
            </li>
          </ul>          
        </div>