Need help with sticky product filter

Site URL: https://justgoodjuju.com/bracelets

On the page (https://justgoodjuju.com/bracelets) we have a filter list (using Categories) that is presented on the Left Hand side.  When there are a lot of products (select All) and you scroll down, the filter list does stick but it does not stick at the top (i.e. the topmost category showing is Accent - Gold when I would like it to be the All).

I just can't seem to latch onto what I need in order to make it stick 'higher' in the list.  I had thought that by altering 'top' I could achieve it (as I assumed top indicates the point at which the container reaches when it sticks) but when I make 'top' any value other than 0, the list is no longer sticky!  The CSS achieving the stickiness is:

/*  FILTER ON PRODUCT PAGES   */
.ProductList-filter 
{
      position: -webkit-sticky;
      position: sticky;
      top: 0;
}

Any help would be very much appreciated.