Change the Alphabet of the text on the basis of list.

[Dipit Maurya]

Hi, 

I want to change the alphabet at the top on the basis of data, while scrolling. Assuming we are getting the list in sequential order. 

 

See the Pen GRvRxjZ by konnectdipit (@konnectdipit) on CodePen

[akapowl]

Hey there @Dipit Maurya

 

I'd probably work with a data-attribute on each .inner-listing for something like that. Maybe something like this:

 

See the Pen c95cfa7260c37ea092daef8f5c92fd13 by akapowl (@akapowl) on CodePen

 

Edit:

... here is another version, polished up a bit with regard to margins/padding and a slight change on the start/end of the ScrollTrigger.

 

See the Pen d4b4927ba6227d308fb947c1cf4f388d by akapowl (@akapowl) on CodePen

 

[Dipit Maurya]

@akapowl Thanks. This is exactly what i wanted. 🥳