How To Scroll On A Fixed Div

A reader sent me in a GIF showing off a cool result they saw on Google on mobile. (Presumably the homepage you meet when you launch Chrome on Android?) At that place is a search input in the middle of the page that scrolls with the page, but every bit it'south about to scroll off the page, it becomes affixed to the header. Let'southward embrace that, because, you lot know…

OH: I'm a mobile web programmer, so I basically spend all day getting requests for content to stick to the top after some scrolling

— Daniel Wilson (@dancwilson) September xvi, 2014

Information technology's a absurd effect particularly if used to make UX better and not to braze some dumb intrusive advertisement. Here'due south the GIF I based the idea on. Fiddling inclement, but the idea is there:

Two States

Similar most skilful tricks, at that place isn't much to information technology. All we practice is call back of (and design for) the two unlike possible states:

Search bar in its scrollable position
Search bar in its stock-still header position

We toggle between them simply by irresolute a form name. There is no trickery with having ii 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 movement a single ane around.

State One

(I'm going to use SCSS hither because the nesting is squeamish for managing states.)

          .top-header {   position: fixed;   acme: 0;   left: 0;   width: 320px;   height: 60px; }  .search { /* Container simply in case nosotros want more than simply the search input to come along */   position: absolute;   acme: 155px;   left: 20px;   right: 20px;   input {     width: 265px;     transition: width 0.2s;     -webkit-advent: none; /* Autoprefixer doesn't take hold of this */   } }  .acme {   elevation: 250px; /* Space in here for search */   padding-top: 40px;   position: relative; }

State Ii

Assuming we've put a class of "prepare-search" on a parent chemical element.

          .top-header {   ...   .prepare-search & {     background: #eee;   } }  .search { /* Container just in case we desire more than just the search input to come along */   ...   .fix-search & {     position: stock-still;     top: 10px;     input {       width: 250px;     }   } }

Switching States

The trick hither is applying that course at but the right moment. In our fiddling demo, we can only exam for when that perfect moment would be and hard code that into some JavaScript watching for scrolling. jQuery style:

          var wrap = $("#wrap");  wrap.on("roll", office(e) {        if (this.scrollTop > 147) {     wrap.addClass("gear up-search");   } else {     wrap.removeClass("fix-search");   }    });

That'southward all it takes to switch betwixt the two states nosotros've set up. If the folio has scrolled downwardly 147 pixels or more, information technology will have that form applied. If non, it doesn't. Fifty-fifty if you get down and come up back up the course volition become away (considering this picayune office gets called on every scroll effect).

Demo

See the Pen Search Box in Content Moves to Stock-still Header past Chris Coyier (@chriscoyier) on CodePen.

Debouncing

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

CSS

This is the kind of thing that would be sweet to exercise in CSS alone. No smashing solutions pop to mind just yet, but I'chiliad continually amazed by crazy things people apply CSS to practice, so if something comes along I'll update this.

Perhaps anytime we'll be able to do curlicue position media queries?

Fixed Position Support

Annotation that this demo relies on fixed positioning, which has a sketchy history on mobile. While I'grand tempted to say it has "pretty good" support these days, yous should make the sentence yourself. Some reading:

Tin can I Utilize… on fixed positioning
Fixed Positioning in Mobile Browsers by Brad Frost
Problems with position fixed & scrolling on iOS past Remy Sharp

This is just one (not particularly reusable) instance

At that place are a lot of magic numbers in this demo. Someday you are setting heights there should be some alert flags happening upward in your brain. Information technology doesn't mean never do it, it but means be warned. In this demo, if that centered image in the header changed summit, it would look weird pretty much no matter what. This isn't the most flexible and forgiving of layouts equally it is. Fifty-fifty if you lot fixed the header to look right later 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 impenetrable system.