1

Recently updated my blog and was looking for the improvements they have added. I noticed a floating section of text that stayed there until a part of description ended. (Similar to the timestamp on whatsapp messages that you read when you have a long list).

Took some snapshots as I am not certain what this effect is called:-

image where I scroll down the page I am scrolling down the page in this pic. There are two sections, First, tells the title of feature update and Second (on the right), is its description.

Floating section replaced by next

The marked text "Coding Enhancments", kept floating until the description ended and next title "Even More Widget Updates" took its place

I wish to implement something like that but I am unable to figure what this effect is. Would be grateful if someone can suggest what this effect is called.

  • Hard to say without being able to examine the underlying code. They may be using a JavaScript library, or it may be CSS positioning (like using the experimental "sticky" property). Or else a combination of both. – Henry Visotski Feb 26 '18 at 17:16
1

I don't think there is a widely adopted term for it in UX. On the development side some libraries refer to that effect as sticking (making that title sticky for a while) some as pinning.

But you seem to be really more focused on just trying to find a way of replicating it. I recommend you look into transition libraries for single page websites or even fixed long scrolling.

Probably the two most popular ones are Skroll and ScrollMagic; you can even see a similar version of that effect on the ScrollMagic website demos.

In that demo you will see that the first menu that gets pinned, moves itself upwards way before the second menu appears, that can be configured as you seem to be describing.

Another implemented example with Skroll is Urthlabs.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.