[Help] How to use sticky for each segment

[YauKeng]

Help Wanted

I've few section(category), each section I want to have an divider info(category) sticky on top when the user scroll down. How to achieve this?

Question:

1. If I've multiple segment, I want each segment have own sticky info, do I need to create multiple $('.ui.sticky') for each sticky? example: $('.ui.sticky.one') $('.ui.sticky.two') $('.ui.sticky.three'), ..., any easier way?

2. Sticky always set height: 14px !important, how can I make it auto height, based on my content?

3. Please refer to the jsffidle and image uploaded.
   3.1 When I scroll to the end, my category 2 sticky not dissapear, why?
   3.2 When I scroll back to top, my sticky info dissapear, because it set height: 14px, how to avoid it?

If you have any divider sticky example or something that doing what I need, please let me know. Thanks.

Testcase

jsfiddle
Image

[ko2in]

@YauKeng The sticky module sets the height depends on the content within the sticky element. Your sticky element is only 14px high. So, it's correct.

3.1 When I scroll to the end, my category 2 sticky not dissapear, why?
3.2 When I scroll back to top, my sticky info dissapear, because it set height: 14px, how to avoid it?

As far as I tested in your fiddle, it works as it supposed to be. The category 2 sticky disappears as soon as it's context (.ui.segment.two) is out of the visible area entirely on the screen.

And when I scroll back to the top of the page, the sticky element of category 1 is still appearing as expected. I'm not sure which sticky info you're expecting to see when you scroll back to top.

Maybe, this is not the problem you're talking about or I couldn't catch your explanation about your issue very well. A screenshot or animation GIF may be helpful to clarify better.

[YauKeng]

@ko2in can you try with smaller window?

As you can see from my image and gif, I've 3 issue.
Problem:

1. Segment 1 ended, but divider still appear.
2. Category 2 divider missing at certain point.
3. Scroll up, both divider missing.

[ko2in]

@YauKeng OK. Now I can reproduce it with smaller screen.

This issue causes because negative margin set on the cards container: margin: -0.875em -0.5em. It is less noticeable in large screen, but huge impact in smaller screen because of em unit as your example.

So, with very small height of your sticky container with 14px is totally covered by the cards container.

The cards container need to have negative margin to cover the space taken by the card elements inside.

So, I guess you should wrap your cards within another container and add the top margin or padding.

And your sticky elements also have spaces such as margin, and padding around the box. So, the calculation of the sticky position is slightly incorrect due to these unexpected spaces in your use-case. I think you should adjust the HTML, CSS and customize to suit your need.

Here's fiddle that would give you the result you expected. https://jsfiddle.net/a2srh5gv/1/

[YauKeng]

Thanks @ko2in