{"id":183272,"date":"2014-09-17T07:40:59","date_gmt":"2014-09-17T14:40:59","guid":{"rendered":"http:\/\/css-tricks.com\/?p=183272"},"modified":"2014-09-17T11:22:14","modified_gmt":"2014-09-17T18:22:14","slug":"scroll-fix-content","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/scroll-fix-content\/","title":{"rendered":"Scroll-Then-Fix Content"},"content":{"rendered":"<p>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&#8217;s about to scroll off the page, it becomes affixed to the header. Let&#8217;s cover that, because, you know&#8230;<\/p>\n<blockquote class=\"twitter-tweet\" lang=\"en\">\n<p>OH: I&#39;m a mobile web developer, so I basically spend all day getting requests for content to stick to the top after some scrolling<\/p>\n<p>&mdash; Daniel Wilson (@dancwilson) <a href=\"https:\/\/twitter.com\/dancwilson\/status\/511855024906190848\" rel=\"noopener\">September 16, 2014<\/a><\/p><\/blockquote>\n<p><script async src=\"\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script><\/p>\n<p>It&#8217;s a cool effect particularly if used to make UX better and not to affix some dumb intrusive ad. Here&#8217;s the GIF I based the idea on. Little choppy, but the idea is there:<\/p>\n<figure id='post-183284 media-183284' class='align-none'><img src='https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2014\/09\/google-version-of-scroll-fixed.gif' alt='' data-recalc-dims=\"1\" \/><\/figure>\n<h3>Two States<\/h3>\n<p>Like most good tricks, there isn&#8217;t much to it. All we do is think of (and design for) the two different possible states:<\/p>\n<ol>\n<li>Search bar in its scrollable position<\/li>\n<li>Search bar in its fixed header position<\/li>\n<\/ol>\n<p>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&#8217;s good, as we don&#8217;t want to smurf around with keeping those in sync. Much easier to just move a single one around.<\/p>\n<h3>State One<\/h3>\n<figure id='post-183279 media-183279' class='align-none'><img src='https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2014\/09\/state-1.png' alt='' data-recalc-dims=\"1\" \/><\/figure>\n<p>(I&#8217;m going to use SCSS here because the nesting is nice for managing states.)<\/p>\n<pre rel=\"SCSS\"><code class=\"language-css\">.top-header {\r\n  position: fixed;\r\n  top: 0;\r\n  left: 0;\r\n  width: 320px;\r\n  height: 60px;\r\n}\r\n\r\n.search { \/* Container just in case we want more than just the search input to come along *\/\r\n  position: absolute;\r\n  top: 155px;\r\n  left: 20px;\r\n  right: 20px;\r\n  input {\r\n    width: 265px;\r\n    transition: width 0.2s;\r\n    -webkit-appearance: none; \/* Autoprefixer doesn't catch this *\/\r\n  }\r\n}\r\n\r\n.top {\r\n  height: 250px; \/* Space in here for search *\/\r\n  padding-top: 40px;\r\n  position: relative;\r\n}<\/code><\/pre>\n<h3>State Two<\/h3>\n<figure id='post-183281 media-183281' class='align-none'><img src='https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2014\/09\/state-2.png' alt='' data-recalc-dims=\"1\" \/><\/figure>\n<p>Assuming we&#8217;ve put a class of &#8220;fix-search&#8221; on a parent element.<\/p>\n<pre rel=\"SCSS\"><code class=\"language-css\">.top-header {\r\n  ...\r\n  .fix-search &amp; {\r\n    background: #eee;\r\n  }\r\n}\r\n\r\n.search { \/* Container just in case we want more than just the search input to come along *\/\r\n  ...\r\n  .fix-search &amp; {\r\n    position: fixed;\r\n    top: 10px;\r\n    input {\r\n      width: 250px;\r\n    }\r\n  }\r\n}<\/code><\/pre>\n<h3>Switching States<\/h3>\n<p>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:<\/p>\n<pre rel=\"jQuery\"><code class=\"language-javascript\">var wrap = $(\"#wrap\");\r\n\r\nwrap.on(\"scroll\", function(e) {\r\n    \r\n  if (this.scrollTop &gt; 147) {\r\n    wrap.addClass(\"fix-search\");\r\n  } else {\r\n    wrap.removeClass(\"fix-search\");\r\n  }\r\n  \r\n});<\/code><\/pre>\n<p>That&#8217;s all it takes to switch between the two states we&#8217;ve set up. If the page has scrolled down 147 pixels or more, it will have that class applied. If not, it doesn&#8217;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).<\/p>\n<h3>Demo<\/h3>\n<p data-height=\"563\" style=\"height: 563px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-theme-id=\"1\" data-slug-hash=\"AdaKr\" data-default-tab=\"result\" data-user=\"chriscoyier\" class='codepen'>See the Pen <a href=\"http:\/\/codepen.io\/chriscoyier\/pen\/AdaKr\/\" rel=\"noopener\">Search Box in Content Moves to Fixed Header<\/a> by Chris Coyier (<a href=\"http:\/\/codepen.io\/chriscoyier\" rel=\"noopener\">@chriscoyier<\/a>) on <a href=\"http:\/\/codepen.io\" rel=\"noopener\">CodePen<\/a>.<\/p>\n<h3>Debouncing<\/h3>\n<p>In the grand tradition of mentioning scroll debouncing whenever any demo binds an event to a scroll event: you should consider <a href=\"http:\/\/davidwalsh.name\/javascript-debounce-function\" rel=\"noopener\">debouncing<\/a> when binding functions to scroll events, because if you don&#8217;t, it&#8217;ll get called a zillion times and could be slow.<\/p>\n<h3>CSS<\/h3>\n<p>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&#8217;m continually amazed by crazy things people use CSS to do, so if something comes along I&#8217;ll update this.<\/p>\n<p>Perhaps someday we&#8217;ll be able to do scroll position media queries?<\/p>\n<h3>Fixed Position Support<\/h3>\n<p>Note that this demo relies on fixed positioning, which has a sketchy history on mobile. While I&#8217;m tempted to say it has &#8220;pretty good&#8221; support these days, you should make the judgement yourself. Some reading:<\/p>\n<ul>\n<li><a href=\"http:\/\/caniuse.com\/#feat=css-fixed\" rel=\"noopener\">Can I Use&#8230;<\/a> on fixed positioning<\/li>\n<li><a href=\"http:\/\/bradfrostweb.com\/blog\/mobile\/fixed-position\/\" rel=\"noopener\">Fixed Positioning in Mobile Browsers<\/a> by Brad Frost<\/li>\n<li><a href=\"http:\/\/remysharp.com\/2012\/05\/24\/issues-with-position-fixed-scrolling-on-ios\" rel=\"noopener\">Issues with position fixed &#038; scrolling on iOS<\/a> by Remy Sharp<\/li>\n<\/ul>\n<h3>This is just one (not particularly reusable) example<\/h3>\n<p>There are a lot of <a href=\"https:\/\/css-tricks.com\/magic-numbers-in-css\/\">magic numbers<\/a> in this demo. Anytime you are setting heights there should be some warning flags happening up in your brain. It doesn&#8217;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&#8217;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. <\/p>\n<p>Perhaps some version of using <a href=\"http:\/\/imakewebthings.com\/jquery-waypoints\/\" rel=\"noopener\">waypoints<\/a> (or the concept of it) could make a more bulletproof system. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>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&#8217;s about to scroll off the page, it [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[4],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/183272"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=183272"}],"version-history":[{"count":9,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/183272\/revisions"}],"predecessor-version":[{"id":192427,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/183272\/revisions\/192427"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=183272"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=183272"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=183272"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}