{"id":304383,"date":"2020-03-05T08:27:44","date_gmt":"2020-03-05T15:27:44","guid":{"rendered":"https:\/\/css-tricks.com\/?p=304383"},"modified":"2020-03-06T11:38:28","modified_gmt":"2020-03-06T18:38:28","slug":"the-slideout-footer","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/the-slideout-footer\/","title":{"rendered":"The Slideout Footer"},"content":{"rendered":"\n<p>A fascinating new site called <a href=\"https:\/\/themarkup.org\/\" rel=\"noopener\">The Markup<\/a> just <a href=\"https:\/\/www.nytimes.com\/2020\/02\/24\/business\/the-markup-tech-launch.html\" rel=\"noopener\">launched<\/a>. Tagline: <em>Big Tech Is Watching You. We\u2019re Watching Big&nbsp;Tech. <\/em>Great work <a href=\"https:\/\/twitter.com\/upstatement\/status\/1232783078176759808\" rel=\"noopener\">from Upstatement<\/a>. The content looks amazing, but of course, around here we&#8217;re always interested in the design and tech as well. There is loads to adore, from the clean typography, interesting layout, and bold angled hover states on blocks, to the tasteful dots motif.<\/p>\n\n\n\n<p>The footer is clever as well, in how it appears to slide out from underneath the content as you scroll to the bottom of the page. Let&#8217;s make it!<\/p>\n\n\n\n<!--more-->\n\n\n\n<figure class=\"wp-block-video\"><video controls muted src=\"https:\/\/css-tricks.com\/slideout-footer_ibnixt\/\" playsinline><\/video><\/figure>\n\n\n\n<p>Here&#8217;s the trick:<\/p>\n\n\n\n<ol><li>The main content area is <strong>at least <code>100vh<\/code> tall<\/strong>. Most sites are anyway, but just to be safe. <\/li><li>The main content area has <strong>a solid background<\/strong> as well, which covers the footer we&#8217;re going to hide behind it. <\/li><li>The footer comes after the main content area in the HTML, so to make sure the main content area <strong>sits on top<\/strong>, you&#8217;ll need a little relative positioning and z-index.<\/li><li>The footer uses <strong>sticky positioning<\/strong> to place itself on the bottom. <\/li><\/ol>\n\n\n\n<p>That last one is the fanciest trick, and it&#8217;s actually fancier than The Markup does it. They use <code>position: fixed;<\/code> on the footer and a <a href=\"https:\/\/css-tricks.com\/magic-numbers-in-css\/\">magic number<\/a> <code>margin-bottom<\/code> on the main content to make it work. No magic numbers needed when going sticky.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_oNXZJzj\" src=\"\/\/codepen.io\/anon\/embed\/oNXZJzj?height=431&amp;theme-id=1&amp;slug-hash=oNXZJzj&amp;default-tab=css,result\" height=\"431\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed oNXZJzj\" title=\"CodePen Embed oNXZJzj\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>The fact that that works so easily without magic numbers is pretty rad. Thanks to <a href=\"https:\/\/codepen.io\/shshaw\/\" rel=\"noopener\">Stephen Shaw<\/a> for the sticky trick! My first crack at this used fixed positioning and magic numbers, but it&#8217;s so much more usable without that.<\/p>\n\n\n\n<p>Preethi showed us a <a href=\"https:\/\/css-tricks.com\/creating-sliding-effects-using-sticky-positioning\/#article-header-id-3\">super similar technique<\/a> in 2018. The main different here is using a linear gradient on the body&#8217;s background, which is a nice workaround if applying a solid color is somehow limiting to the overall design.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"keyframers-video\">Keyframers Video<\/h3>\n\n\n<p>Stephen did one up!<\/p>\n\n\n\n<figure class=\"wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Revealing footer with position: sticky! | Quick CSS-only Tutorial | Keyssentials by @keyframers\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/vlxSW0E93UA?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>A fascinating new site called The Markup just launched. Tagline: Big Tech Is Watching You. We\u2019re Watching Big&nbsp;Tech. Great work from Upstatement. The content looks amazing, but of course, around here we&#8217;re always interested in the design and tech as well. There is loads to adore, from the clean typography, interesting layout, and bold angled [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":304739,"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":true,"jetpack_social_options":[]},"categories":[4],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/slideout-footer.gif?fit=700%2C350&ssl=1","jetpack-related-posts":[{"id":333020,"url":"https:\/\/css-tricks.com\/tech-stacks-and-website-longevity\/","url_meta":{"origin":304383,"position":0},"title":"Tech Stacks and Website Longevity","date":"January 25, 2021","format":false,"excerpt":"Steren Giannini in \"My stack will outlive yours\": My stack requires no maintenance, has perfect Lighthouse scores, will never have any security vulnerability, is based on open standards, is portable, has an instant dev loop, has no build step and\u2026 will outlive any other stack. Jeremy Keith in \"npm ruin\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/03\/stacked-boxes.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":19269,"url":"https:\/\/css-tricks.com\/women-tech\/","url_meta":{"origin":304383,"position":1},"title":"Women &#038; Tech","date":"November 22, 2012","format":false,"excerpt":"We will ask a group of clever women out for coffees to pick their brains and share our conversations. We're not endorsing the obvious; we want to get under the surface of what it's like to be a woman working in tech. By a cracking team.","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":319886,"url":"https:\/\/css-tricks.com\/how-to-use-css-grid-for-sticky-headers-and-footers\/","url_meta":{"origin":304383,"position":2},"title":"How to Use CSS Grid for Sticky Headers and Footers","date":"September 2, 2020","format":false,"excerpt":"CSS Grid is a collection of properties designed to make layout easier than it\u2019s ever been. Like anything, there's a bit of a learning curve, but Grid is honestly fun to work with once you get the hang of it. One area where it shines is dealing with headers and\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/08\/sticky-head-footer.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":335451,"url":"https:\/\/css-tricks.com\/too-many-svgs-clogging-up-your-markup-try-use\/","url_meta":{"origin":304383,"position":3},"title":"Too Many SVGs Clogging Up Your Markup? Try `use`.","date":"March 10, 2021","format":false,"excerpt":"Recently, I had to make a web page displaying a bunch of SVG graphs for an analytics dashboard. I used a bunch of <rect>, <line> and <text> elements on each graph to visualize certain metrics. This works and renders just fine, but results in a bloated DOM tree, where each\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/s_30679D1AA0AC71109E05566130F3B3405D427219F5EA7076D68F2D29FC38A690_1613241564787_CodePen-SVG-Graphs-Stress-Render-Test.png?fit=1200%2C538&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":322209,"url":"https:\/\/css-tricks.com\/how-to-make-an-unobtrusive-scroll-to-top-button\/","url_meta":{"origin":304383,"position":4},"title":"How to Make an Unobtrusive Scroll-to-Top Button","date":"October 5, 2020","format":false,"excerpt":"A button to return to the top of the page allows the user to quickly return to the top of the page without making too much effort. This can be very useful when the page has a lot of content or which happens, for example, on one page websites, when\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/09\/scroll-to-top.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":242097,"url":"https:\/\/css-tricks.com\/couple-takes-sticky-footer\/","url_meta":{"origin":304383,"position":5},"title":"Sticky Footer, Five Ways","date":"May 25, 2016","format":false,"excerpt":"The purpose of a sticky footer is that it \"sticks\" to the bottom of the browser window. But not always, if there is enough content on the page to push the footer lower, it still does that. But if the content on the page is short, a sticky footer will\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/304383"}],"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=304383"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/304383\/revisions"}],"predecessor-version":[{"id":304774,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/304383\/revisions\/304774"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/304739"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=304383"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=304383"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=304383"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}