{"id":303002,"date":"2020-02-06T17:59:30","date_gmt":"2020-02-07T00:59:30","guid":{"rendered":"https:\/\/css-tricks.com\/?p=303002"},"modified":"2020-02-06T17:59:31","modified_gmt":"2020-02-07T00:59:31","slug":"getting-fancy-with-position-sticky","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/getting-fancy-with-position-sticky\/","title":{"rendered":"Getting Fancy with position: sticky;"},"content":{"rendered":"\n<p><a href=\"https:\/\/thecleverest.com\/about\/\" rel=\"noopener\">Mike Solomon<\/a> worked on <a href=\"https:\/\/www.esquire.com\/interactive\/a30261365\/jared-mccann-joseph-encinia-competitive-mens-yoga-rivalry\/\" rel=\"noopener\">a fancy scrollytelling post for Esquire<\/a> and <a href=\"https:\/\/thecleverest.com\/getting-fancy-with-csss-position-sticky\/\" rel=\"noopener\">blogged about it<\/a>. It has GIFs of each step along the way of figuring out not just <code>position: sticky;<\/code> but also using negative margins, wrapper divs, backgrounds, and even a smidge of JavaScript measuring to get it all right. <\/p>\n\n\n\n<p>What it doesn&#8217;t have is any isolated demo of the effect. I figured I&#8217;d give a crack at reverse engineering it. <\/p>\n\n\n\n<!--more-->\n\n\n\n<p>Here&#8217;s mine, which I&#8217;ll call &#8220;Sticky Figcaption with Protruding Figure&#8221;:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_JjoQWxa\" src=\"\/\/codepen.io\/anon\/embed\/JjoQWxa?height=550&amp;theme-id=1&amp;slug-hash=JjoQWxa&amp;default-tab=result\" height=\"550\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed JjoQWxa\" title=\"CodePen Embed JjoQWxa\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>That demo is full of magic numbers to make the exit do the &#8220;tuck behind&#8221; effect. If that&#8217;s not important, <a href=\"https:\/\/codepen.io\/chriscoyier\/pen\/JjoQmjm\" rel=\"noopener\">this version is much cleaner<\/a>. <\/p>\n\n\n\n<p>Probably not <em>quite<\/em>as Mike had it, but I&#8217;m not privy to the exact details he was going for in the blog post. His final GIF is:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/01\/giphy.gif?resize=274%2C406&#038;ssl=1\" alt=\"\" class=\"wp-image-303005\" width=\"274\" height=\"406\" data-recalc-dims=\"1\" \/><\/figure><\/div>\n\n\n\n<p>Here&#8217;s a quick video I&#8217;ll shoot from the article itself in case that inspires you to figure out a different approach:<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls loop muted src=\"https:\/\/res.cloudinary.com\/css-tricks\/video\/upload\/f_auto,q_auto\/v1580428753\/sticky-figcaption_shpljl.mp4\" playsinline><\/video><\/figure>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p><strong>Erp!<\/strong> I actually spoke with Mike about all this, and he says that the main takeaway from all this (which flew right over my head \u2014 sorry Mike!) is that &#8220;sticky isn&#8217;t just for the top of the screen.&#8221; Notice in the final product how the sticky element becomes sticky long before it becomes the element at the top of the screen. It&#8217;s more like the middle of the screen. That&#8217;s what the <code>top<\/code> value is for with <code>position: sticky;<\/code> but, in this demo where the goal is to have it slide in and out of an image, it gets tricky.<\/p>\n\n\n\n<p>After some back and forth forking&#8230;<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_LYVPyRJ\" src=\"\/\/codepen.io\/anon\/embed\/LYVPyRJ?height=550&amp;theme-id=1&amp;slug-hash=LYVPyRJ&amp;default-tab=result\" height=\"550\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed LYVPyRJ\" title=\"CodePen Embed LYVPyRJ\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Mike Solomon worked on a fancy scrollytelling post for Esquire and blogged about it. It has GIFs of each step along the way of figuring out not just position: sticky; but also using negative margins, wrapper divs, backgrounds, and even a smidge of JavaScript measuring to get it all right. What it doesn&#8217;t have is [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":303189,"comment_status":"closed","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":[17],"tags":[1300],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/02\/sticky-figcaption.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":318924,"url":"https:\/\/css-tricks.com\/stacked-cards-with-sticky-positioning-and-a-dash-of-sass\/","url_meta":{"origin":303002,"position":0},"title":"Stacked Cards with Sticky Positioning and a Dash of Sass","date":"August 13, 2020","format":false,"excerpt":"The other day, I spotted this particularly lovely bit from Corey Ginnivan\u2019s website where a collection of cards stack on top of one another as you scroll. I started wondering how much JavaScript this would involve and how you\u2019d go about making it when I realized \u2014 ah! \u2014 this\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/08\/stacked-cards.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":273952,"url":"https:\/\/css-tricks.com\/sticky-smooth-active-nav\/","url_meta":{"origin":303002,"position":1},"title":"Sticky, Smooth, Active Nav","date":"August 7, 2018","format":false,"excerpt":"Just like the title says! Here's a sidebar navigation bar that... Uses sticky positioning. It stays on the screen when it can, but won't overlap the header, footer, or ever make any of it's links inaccessible. Scrolls smoothly to the sections you click to. Activates the current nav based on\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/07\/smooth-scroll-nav.gif?fit=800%2C400&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":302002,"url":"https:\/\/css-tricks.com\/sticky-table-of-contents-with-scrolling-active-states\/","url_meta":{"origin":303002,"position":2},"title":"Sticky Table of Contents with Scrolling Active States","date":"January 30, 2020","format":false,"excerpt":"Say you have a two-column layout: a main column with content and a sidebar. Say it has a lot of content, with sections that requires scrolling. The sidebar column that is largely empty, such that you can safely put a position: sticky; table of contents over there for all that\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/03\/scroll-position.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":255843,"url":"https:\/\/css-tricks.com\/stickybits-alternative-position-sticky-polyfills\/","url_meta":{"origin":303002,"position":3},"title":"Stickybits: an alternative to `position: sticky` polyfills","date":"June 25, 2017","format":false,"excerpt":"Stickybits is a small JavaScript utility plugin. It's goal is not to get in the way. It does one thing well: help with sticky elements. It is not dependent on other JavaScript Plugins, can be imported via npm, and approaches sticky elements in a very utility-oriented way. Solving the sticky\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":358575,"url":"https:\/\/css-tricks.com\/using-position-sticky-with-css-grid\/","url_meta":{"origin":303002,"position":4},"title":"Using Position Sticky With CSS Grid","date":"December 10, 2021","format":false,"excerpt":"Say you've got a two-column CSS grid and you want one of those columns to behave like position: sticky;. There is nothing stopping you from doing that. But the default height for those two columns is going to be \"as tall as the tallest content in either column\" because the\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/04\/sticky-header.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":247652,"url":"https:\/\/css-tricks.com\/position-sticky-2\/","url_meta":{"origin":303002,"position":5},"title":"position: sticky;","date":"November 9, 2016","format":false,"excerpt":"Better position: sticky; support is on the horizon. WebKit dropped in 2013, Firefox in 2014, and now Blink in (probably) 2016. MDN explains it well: Sticky positioning is a hybrid of relative and fixed positioning. The element is treated as relative positioned until it crosses a specified threshold, at which\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/02\/sticky-figcaption.png?fit=1024%2C512&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/303002"}],"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=303002"}],"version-history":[{"count":7,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/303002\/revisions"}],"predecessor-version":[{"id":303190,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/303002\/revisions\/303190"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/303189"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=303002"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=303002"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=303002"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}