fijar div al llegar al top

[laura_moreno14]

Tengo un glosario y quiero que el menu con el indice de letras quede fijo al top de la pagina cuando al hacer scroll el div de el menu llege arriba. Hasta ahora solo consigo que se quede fijo nada as empiezas hacer scroll.

Podeis verlo en este link.

Este es el codigo que tengo:

Código HTML:

<div id="glosario">
 
    <h1><?php single_cat_title(); ?></h1>
 
    <?php $categories =  get_categories('child_of=100&hide_empty=0'); 
        foreach  ($categories as $category) {
            //Display the sub category information using $category values like $category->cat_name
            echo '<h2><a name="' . $category->name . '">'.$category->name.'</a></h2>';
            echo '<ul>';
            $posts = get_posts(array('cat' => $category->term_id, 'order' => 'ASC', 'post_type' => 'glosario', 'showposts' =>-1, 'post_status' => 'publish,future,draft'));
            foreach ($posts as $post) {
                echo '<li><a href="'.get_permalink($post->ID).'">'.get_the_title().'</a></li>';  
            }  
            echo '</ul>';
        } ?>
          <div id="scrollablemenu">
<?php $cats = get_categories( 'child_of=100&hide_empty=0');
foreach ($cats as $cat) {
    echo '<a href="#' . $cat->cat_name . '" class="scrollablemenubutton" class="scroll" onclick="jQuery(\'body\').scrollTo(\'#' . $cat->cat_name . '\', 1000);">' . $cat->cat_name . '</a>';
}
?>
</div>
</div>
 

Código CSS:

#glosario .stick {
position:fixed;
right:500px;
}
 

Código Javascript:

jQuery(document).ready(function() {
    var s = jQuery("#scrollablemenu");
    var pos = s.position();                    
    jQuery(window).scroll(function() {
        var windowpos = jQuery(window).scrollTop();
        if (windowpos >= pos.top) {
            s.addClass("stick");
        } else {
            s.removeClass("stick"); 
        }
    });
});
 

Haber si alguien puede echarme una mano, el javascript no es lo mio.
Gracias de antemano a tod@s!