{"id":336045,"date":"2021-03-15T14:53:29","date_gmt":"2021-03-15T21:53:29","guid":{"rendered":"https:\/\/css-tricks.com\/?page_id=336045"},"modified":"2021-07-09T08:11:05","modified_gmt":"2021-07-09T15:11:05","slug":"205-sticky-positioning-how-it-works-what-can-break-it-and-dumb-tricks","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/video-screencasts\/205-sticky-positioning-how-it-works-what-can-break-it-and-dumb-tricks\/","title":{"rendered":"#205: Sticky Positioning: How it Works, What Can Break It, and Dumb Tricks"},"content":{"rendered":"<h3 class=\"wp-block-heading\" id=\"h-how-it-works\">How it works<\/h3>\n\n\n<p>You apply <code><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/p\/position\/#sticky\">position: sticky;<\/a><\/code> to an element along with a <code>top<\/code>, <code>left<\/code>, <code>right<\/code>, or <code>bottom<\/code> threshold and it will &#8220;stick&#8221; in that position when the threshold is passed, as long as there is room to move within the parent container.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_LYbjMoZ\" src=\"\/\/codepen.io\/anon\/embed\/LYbjMoZ?height=450&amp;theme-id=1&amp;slug-hash=LYbjMoZ&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed LYbjMoZ\" title=\"CodePen Embed LYbjMoZ\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-what-can-break-it\">What can break it<\/h3>\n\n\n<ul><li>You forgot to apply <code><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/p\/position\/#sticky\">position: sticky;<\/a><\/code>.<\/li><li>You forgot to apply a position threshold like <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/t\/top-right-bottom-left\/\"><code>top<\/code>, <code>left<\/code>, <code>bottom<\/code>, or <code>right<\/code><\/a>.<\/li><li>You&#8217;re looking in an old-Safari browser and didn&#8217;t use <code>-webkit-sticky<\/code> as the value.<\/li><li>The threshold you applied doesn&#8217;t apply in that scroll direction.<\/li><li>There is no room to move in the parent container.<\/li><li>A parent element has hidden <code><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/o\/overflow\/\">overflow<\/a><\/code> (even in a direction that doesn&#8217;t matter to the scrolling).<\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-weird-tricks\">Weird tricks<\/h3>\n\n\n    \t\t\n    <div class=\"in-article-cards\">\n      <article class=\"in-article-card article\" id=\"mini-post-336045\">\n\n  <time datetime=\"2020-03-05\" title=\"Originally published Mar 15, 2021\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Mar 6, 2020  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/the-slideout-footer\/\">\n      The Slideout Footer    <\/a>\n  <\/h3>\n\n  \n      <div class=\"tags\">\n      <a href=\"https:\/\/css-tricks.com\/tag\/sticky\/\" rel=\"tag\">sticky<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card article\" id=\"mini-post-336045\">\n\n  <time datetime=\"2021-02-09\" title=\"Originally published Mar 15, 2021\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Feb 9, 2021  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/a-table-with-both-a-sticky-header-and-a-sticky-first-column\/\">\n      A table with both a sticky header and a sticky first column    <\/a>\n  <\/h3>\n\n  \n      <div class=\"tags\">\n      <a href=\"https:\/\/css-tricks.com\/tag\/sticky\/\" rel=\"tag\">sticky<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n    <\/div>\n  \n\n\n\n<p>Usings transforms like <code>scale()<\/code> and <code>rotate()<\/code>, the behavior of <code>position: sticky;<\/code> can get pretty weird, like this &#8220;slide by&#8221; behavior:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_ExxdGPO\" src=\"\/\/codepen.io\/anon\/embed\/ExxdGPO?height=650&amp;theme-id=1&amp;slug-hash=ExxdGPO&amp;default-tab=result\" height=\"650\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed ExxdGPO\" title=\"CodePen Embed ExxdGPO\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>How it works You apply position: sticky; to an element along with a top, left, right, or bottom threshold and it will &#8220;stick&#8221; in that position when the threshold is passed, as long as there is room to move within the parent container. What can break it You forgot to apply position: sticky;. You forgot [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":336049,"parent":1283,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"video-single.php","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":true,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[1300],"acf":[],"jetpack-related-posts":[{"id":325845,"url":"https:\/\/css-tricks.com\/video-screencasts\/198-about-the-position-property\/","url_meta":{"origin":336045,"position":0},"title":"#198: About the Position Property","date":"November 20, 2020","format":false,"excerpt":"static: the default relative: allows you to nudge around with top\/right\/bottom\/left, making z-index work, gives you a positioning contextabsolute: top\/right\/bottom\/left moves the element to that exact position, otherwise the same as relativefixed: like absolute, but scrolling the page doesn't move the element sticky: like fixed, but it doesn't become fixed\u2026","rel":"","context":"In \"layout\"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/position-thumb.png?fit=1200%2C675&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":16536,"url":"https:\/\/css-tricks.com\/almanac\/properties\/p\/position\/","url_meta":{"origin":336045,"position":1},"title":"position","date":"March 19, 2012","format":false,"excerpt":"The position property can help you manipulate the location of an element, for example: .element { position: relative; top: 20px; } Relative to its original position the element above will now be nudged down from the top by 20px. If we were to animate these properties we can see just\u2026","rel":"","context":"In \"position\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":5101,"url":"https:\/\/css-tricks.com\/snippets\/jquery\/jquery-sticky-footer\/","url_meta":{"origin":336045,"position":2},"title":"jQuery Sticky Footer","date":"December 20, 2009","format":false,"excerpt":"In general the CSS Sticky Footer is the best way to go, as it works perfectly smoothly and doesn't require JavaScript. If the markup required simply isn't possible, this jQuery JavaScript might be an option. HTML Just make sure the #footer is the last visible thing on your page. Sticky\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":3852,"url":"https:\/\/css-tricks.com\/snippets\/css\/sticky-footer\/","url_meta":{"origin":336045,"position":3},"title":"Sticky Footer","date":"September 4, 2009","format":false,"excerpt":"Works great if you can apply a fixed height to the footer. Content! I'm the Sticky Footer. * { margin: 0; } html, body { height: 100%; } .page-wrap { min-height: 100%; \/* equal to footer height *\/ margin-bottom: -142px; } .page-wrap:after { content: \"\"; display: block; } .site-footer, .page-wrap:after\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14121,"url":"https:\/\/css-tricks.com\/almanac\/properties\/t\/top-right-bottom-left\/","url_meta":{"origin":336045,"position":4},"title":"top \/ bottom \/ left \/ right","date":"September 6, 2011","format":false,"excerpt":"The top, bottom, left, and right properties are used with position to set the placement of an element. They only have an effect on positioned elements, which are elements with the position property set to anything other than static. For example: relative, absolute, fixed, or sticky. div { : ||\u2026","rel":"","context":"In \"bottom\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":4191,"url":"https:\/\/css-tricks.com\/snippets\/jquery\/persistant-headers-on-tables\/","url_meta":{"origin":336045,"position":5},"title":"Persistant Headers on Tables","date":"September 21, 2009","format":false,"excerpt":"When you scroll down a page with a long table on it, typically the header of the table scrolls away and becomes useless. This code clones the table header and applies it at the top of the page once you have scrolled beyond it, and disappears when you have scrolled\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\/pages\/336045"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"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=336045"}],"version-history":[{"count":6,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/336045\/revisions"}],"predecessor-version":[{"id":336411,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/336045\/revisions\/336411"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/1283"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/336049"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=336045"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=336045"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}