Jump to content

Dipit Maurya

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

Go to solution Solved by akapowl,

Recommended Posts


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

Link to comment
Share on other sites

  • Solution

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



... 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


  • Like 5
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.