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.

.ProductList-filter {
    position: -webkit-sticky;
    position: sticky;
    top: 100px;
}

use px, eg 100px, not 100

Tuanphan - I cannot believe I did that!  Thank you so much for pointing it out.  It works great of course.

@tuanphan is this possible in 7.1?

On 10/24/2020 at 11:12 AM, kindandbrave said:

@tuanphan is this possible in 7.1?

Can you share link? We can check easier

@tuanphan: https://www.littleboxes.shop/build

🙂

Try the following for 7.1: 

// Sticky Product Filter 7.1 //

.products.collection-content-wrapper .nested-category-tree-wrapper  {
    position: -webkit-sticky;
    position: sticky;
    top: 100px;
}

@AndreaDube that worked! Thank you so much!! 🥰

Is there a way for this to work in mobile? I find that it seems to float in the middle of the screen but doesn't have a background so it blends with images.

16 hours ago, kristiitaylor said:

Is there a way for this to work in mobile? I find that it seems to float in the middle of the screen but doesn't have a background so it blends with images.

Can you share link to your site? We can check easier

On 4/5/2021 at 6:28 AM, tuanphan said:

Can you share link to your site? We can check easier

Yes! ktleathergoods.squarespace.com :)

On 4/7/2021 at 2:35 AM, kristiitaylor said:

Yes! ktleathergoods.squarespace.com :)

 

Hi. It looks like you solved this?

On mobile, filter overlap products. You can edit your code to this

/* Product filter */
@media screen and (min-width:641px) {
.ProductList-filter {
    position: -webkit-sticky;
    position: sticky;
    top: 100px
}
}

On 4/11/2021 at 7:36 PM, tuanphan said:

Hi. It looks like you solved this?

On mobile, filter overlap products. You can edit your code to this

/* Product filter */
@media screen and (min-width:641px) {
.ProductList-filter {
    position: -webkit-sticky;
    position: sticky;
    top: 100px
}
}

 

You're amazing this worked! :) :) :)