{"id":1253,"date":"2020-02-08T21:59:20","date_gmt":"2020-02-08T14:59:20","guid":{"rendered":"https:\/\/lab.wptips.dev\/?p=1253"},"modified":"2020-07-05T13:56:00","modified_gmt":"2020-07-05T06:56:00","slug":"sticky-positioning","status":"publish","type":"post","link":"https:\/\/pixelstudio.id\/blog\/sticky-positioning\/","title":{"rendered":"CSS Sticky Positioning (All You Need to Know)"},"content":{"rendered":"\n<p>Sticky positioning is my favorite addition to CSS in recent years. It allows an element to behave like <code>fixed<\/code> position <strong>when you scroll past it<\/strong>.<\/p>\n\n\n\n<p>In this article, we will learn the basics and some advanced tips like adding a class when the element becomes sticky.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">1. How to Make Sticky Element<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"css\" class=\"language-css\">.sticky-nav {\n  position: sticky;\n  top: 0;\n}<\/code><\/pre>\n\n\n\n<p>There are 3 rules you need to follow to make it work:<\/p>\n\n\n\n<ol><li>It sticks to the <strong>direct parent<\/strong>. It can&#8217;t go beyond that.<\/li><li>The HTML markup must be placed correctly. If you want it to stick to the bottom, then you need to place it at the bottom.<\/li><li>You need to use the correct direction property like <code>top<\/code> if you want it to stick at the top.<\/li><\/ol>\n\n\n\n<p><strong>LIVE EXAMPLE:<\/strong><\/p>\n\n\n\n<iframe height=\"400\" scrolling=\"no\" title=\"Experiment with Position: Sticky\" src=\"https:\/\/codepen.io\/hrsetyono\/embed\/ZEGQdmB?height=300&amp;theme-id=12982&amp;default-tab=css,result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\">\n  See the Pen <a href='https:\/\/codepen.io\/hrsetyono\/pen\/ZEGQdmB'>Experiment with Position: Sticky<\/a> by hrsetyono\n  (<a href='https:\/\/codepen.io\/hrsetyono'>@hrsetyono<\/a>) on <a href='https:\/\/codepen.io'>CodePen<\/a>.\n<\/iframe>\n\n\n\n<p>As you can see, the sticky bar only sticks up to the parent&#8217;s height.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">2. On Sticky Listener<\/h2>\n\n\n\n<p>There is no native way to check if the element is currently sticky or not.<\/p>\n\n\n\n<p>So we must fall back into <strong>using JavaScript<\/strong> to check the position of sticky elements every time we scroll.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">(function() { 'use strict';\n\nvar target = '.sticky-bar';\nvar classToToggle = '--stuck';\n             \ndocument.addEventListener( 'DOMContentLoaded', onReady );\n\nfunction onReady() {\n  \/\/ if doesn't support Sticky\n  if( !( CSS.supports &amp;&amp; CSS.supports( 'position', 'sticky' ) ) ) { return; }\n  \n  \/\/ Get the sticky elements and convert it into array\n  var $elems = [].slice.call( document.querySelectorAll( target ) );\n  \n  \/\/ Initial check if already sticky\n  $elems.forEach( checkStickyState );\n  \n  \/\/ Add scroll listener to check each elements\n  window.addEventListener( 'scroll', (e) => {\n    $elems.forEach( checkStickyState );\n  } );\n}\n\nfunction checkStickyState( $elem ) {\n  var currentOffset = $elem.getBoundingClientRect().top;\n  var stickyOffset = parseInt( getComputedStyle( $elem ).top.replace( 'px','' ) );\n  var isStuck = currentOffset &lt;= stickyOffset;\n\n  if( isStuck ) {\n    $elem.classList.add( classToToggle );\n  } else {\n    $elem.classList.remove( classToToggle );\n  }\n}\n             \n})();<\/code><\/pre>\n\n\n\n<p><strong>LIVE EXAMPLE:<\/strong><\/p>\n\n\n\n<iframe height=\"400\" scrolling=\"no\" title=\"Position: Sticky - onSticky Listener\" src=\"https:\/\/codepen.io\/hrsetyono\/embed\/RwPaNOW?height=341&amp;theme-id=12982&amp;default-tab=js,result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\">\n  See the Pen <a href='https:\/\/codepen.io\/hrsetyono\/pen\/RwPaNOW'>Position: Sticky &#8211; onSticky Listener<\/a> by hrsetyono\n  (<a href='https:\/\/codepen.io\/hrsetyono'>@hrsetyono<\/a>) on <a href='https:\/\/codepen.io'>CodePen<\/a>.\n<\/iframe>\n\n\n\n<hr class=\"wp-block-separator is-style-dots\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion &amp; Browser Support<\/h2>\n\n\n\n<p>From the <a rel=\"noreferrer noopener\" aria-label=\"CanIUse chart (opens in a new tab)\" href=\"https:\/\/caniuse.com\/#feat=css-sticky\" target=\"_blank\">CanIUse chart<\/a>, we can tell that the support is excellent as long as you&#8217;re not using it on Table. IE doesn&#8217;t support it but that&#8217;s okay since your site still looks fine without the sticky element.<\/p>\n\n\n\n<p>For <strong>browser prefix<\/strong>, you still need to add <code>-webkit-<\/code> for Safari:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"css\" class=\"language-css\">position: -webkit-sticky;\nposition: sticky;<\/code><\/pre>\n\n\n\n<blockquote class=\"wp-block-quote\"><p>As always, feel free to ask question in the comment below \ud83d\ude42<\/p><\/blockquote>\n","protected":false},"excerpt":{"rendered":"<p>Learn about the basic of Sticky position and some advanced tips like adding a class when the element becomes sticky.<\/p>\n","protected":false},"author":1,"featured_media":1269,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12],"tags":[21],"class_list":["post-1253","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-frontend","tag-css"],"blocksy_meta":"","_links":{"self":[{"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/posts\/1253","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/comments?post=1253"}],"version-history":[{"count":10,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/posts\/1253\/revisions"}],"predecessor-version":[{"id":1572,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/posts\/1253\/revisions\/1572"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/media\/1269"}],"wp:attachment":[{"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/media?parent=1253"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/categories?post=1253"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/tags?post=1253"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}