Faux-Fixed Interactive Email Scrolling Technique

A common technique used on web-pages to make blocks of content stay stationary while the page is being scrolled is by using fixed positioning (position:fixed).

Unfortunately, this CSS property is not supported by the majority of email clients so we need to resort to some trickery to get this to work.

I wrote on the Email on Acid blog a technique to mimic fixed positioning yet works on a surprising number of email clients, namely: iOS (iPhone, iPad), Apple Mail, Outlook for Mac, Gmail webmail and mobile apps (yes!) and Yahoo! webmail.

The technique combines the following techniques:

I built an example for Email on Acid’s Halloween email.

Since Outlook.com strips position and opacity, we’re unable to use stacking order tricks in Outlook so it doesn’t work there.

Read the article for more details.

Subscribe to the #EmailGeeks Newsletter

Leave a Reply

Your email address will not be published. Required fields are marked *