Scroll-Then-Fix Content

A reader sent me in a GIF showing off a cool effect they saw on Google on mobile. (Presumably the homepage you see when you launch Chrome on Android?) There is a search input in the middle of the page that scrolls with the page, but as it’s about to scroll off the page, it becomes affixed to the header. Let’s cover that, because, you know…

It’s a cool effect particularly if used to make UX better and not to affix some dumb intrusive ad. Here’s the GIF I based the idea on. Little choppy, but the idea is there:

Two States

Like most good tricks, there isn’t much to it. All we do is think of (and design for) the two different possible states:

Search bar in its scrollable position

Search bar in its fixed header position

We toggle between them simply by changing a class name. There is no trickery with having two search forms that reveal themselves in different scenarios. That’s good, as we don’t want to smurf around with keeping those in sync. Much easier to just move a single one around.

State One

(I’m going to use SCSS here because the nesting is nice for managing states.)

Switching States

The trick here is applying that class at just the right moment. In our little demo, we can just test for when that perfect moment would be and hard code that into some JavaScript watching for scrolling. jQuery style:

jQuery

That’s all it takes to switch between the two states we’ve set up. If the page has scrolled down 147 pixels or more, it will have that class applied. If not, it doesn’t. Even if you go down and come back up the class will go away (because this little function gets called on every scroll event).

Debouncing

In the grand tradition of mentioning scroll debouncing whenever any demo binds an event to a scroll event: you should consider debouncing when binding functions to scroll events, because if you don’t, it’ll get called a zillion times and could be slow.

CSS

This is the kind of thing that would be sweet to do in CSS alone. No great solutions pop to mind just yet, but I’m continually amazed by crazy things people use CSS to do, so if something comes along I’ll update this.

Perhaps someday we’ll be able to do scroll position media queries?

Fixed Position Support

Note that this demo relies on fixed positioning, which has a sketchy history on mobile. While I’m tempted to say it has “pretty good” support these days, you should make the judgement yourself. Some reading:

Can I Use… on fixed positioning

Fixed Positioning in Mobile Browsers by Brad Frost

Issues with position fixed & scrolling on iOS by Remy Sharp

This is just one (not particularly reusable) example

There are a lot of magic numbers in this demo. Anytime you are setting heights there should be some warning flags happening up in your brain. It doesn’t mean never do it, it just means be warned. In this demo, if that centered image in the header changed height, it would look weird pretty much no matter what. This isn’t the most flexible and forgiving of layouts as it is. Even if you fixed the header to look right after a change, the JavaScript has corresponding magic numbers for when to change state.

Perhaps some version of using waypoints (or the concept of it) could make a more bulletproof system

About Us

We are the creative team of designers. Our target is to provide templates, themes and plugin easily to developers and end users who can customize all the data and design from back-end and manage his/her site by themselves and also provide themes to you below the market rate. And we also provide customized templates to users on your order, you can place your order on request a quote page.