{"id":3040,"date":"2021-07-12T12:02:18","date_gmt":"2021-07-12T12:02:18","guid":{"rendered":"https:\/\/rengga.dev\/blog\/?p=3040"},"modified":"2023-02-28T03:41:10","modified_gmt":"2023-02-28T03:41:10","slug":"css-tutorial-a-dynamically-sized-sticky-sidebar-with-html-and-css","status":"publish","type":"post","link":"https:\/\/rengga.dev\/blog\/css-tutorial-a-dynamically-sized-sticky-sidebar-with-html-and-css\/","title":{"rendered":"CSS Tutorial &#8211; A Dynamically-Sized Sticky Sidebar with HTML and CSS"},"content":{"rendered":"<p><span style=\"color: #ef3207;\"><a style=\"color: #ef3207;\" href=\"https:\/\/rengga.dev\/\" target=\"_blank\" rel=\"noopener\"><strong>Rengga Dev<\/strong><\/a> <\/span>&#8211; Creating page content that sticks to the viewport as you scroll, something like a jump-to-anchor menu or section headings, has never been easier. Throw a\u00a0<code>position: sticky<\/code>\u00a0into your CSS ruleset, set the directional offset (e.g.\u00a0<code>top: 0<\/code>) and you\u2019re ready to impress your teammates with minimal effort.<\/p>\n<p>But sticky positioning can get a bit tricky, particularly when it comes to height and the dangerous situation of hiding content in a position that can\u2019t be scrolled to. Let me set the stage and show you the problem and how I fixed it.<\/p>\n<p>I recently worked on a desktop layout that we\u2019re all familiar with: a main content area with a sidebar next to it. This particular sidebar contains action items and filters that are pertinent to the main content. As the page section is scrolled, this component remains fixed to the viewport and contextually accessible.<br \/>\n<iframe style=\"width: 100%;\" title=\"Dynamic Sticky Sidebar Component\" src=\"https:\/\/codepen.io\/hexagoncircle\/embed\/oNLZmvV?default-tab=result&amp;theme-id=dark\" height=\"600\" frameborder=\"no\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"><br \/>\nSee the Pen <a href=\"https:\/\/codepen.io\/hexagoncircle\/pen\/oNLZmvV\"><br \/>\nDynamic Sticky Sidebar Component<\/a> by Ryan Mulligan (<a href=\"https:\/\/codepen.io\/hexagoncircle\">@hexagoncircle<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<p>This layout may work well on a desktop browser, but isn\u2019t entirely ideal for smaller devices or viewport widths. However, the code here provides a solid foundation that makes it easy to add improvements to the UI.<\/p>\n<p>One simple idea: A button could be affixed to the viewport window that, when clicked, jumps the page down to the sidebar content. Another idea: The sidebar could be hidden off-screen and a toggle button could slide it in from the left or right. Iteration and user testing will help drive this experience in the right direction.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Rengga Dev &#8211; Creating page content that sticks to the viewport as <a class=\"read-more\" href=\"https:\/\/rengga.dev\/blog\/css-tutorial-a-dynamically-sized-sticky-sidebar-with-html-and-css\/\" title=\"CSS Tutorial &#8211; A Dynamically-Sized Sticky Sidebar with HTML and CSS\" itemprop=\"url\"><\/a><\/p>\n","protected":false},"author":1,"featured_media":3806,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[268,197,273,103,227],"newstopic":[],"class_list":{"0":"post-3040","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-html-css","8":"tag-css-grid","9":"tag-css-tutorial","10":"tag-sticky-sidebar","11":"tag-web-design","12":"tag-web-designer"},"_links":{"self":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3040","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/comments?post=3040"}],"version-history":[{"count":1,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3040\/revisions"}],"predecessor-version":[{"id":3042,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3040\/revisions\/3042"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media\/3806"}],"wp:attachment":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media?parent=3040"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/categories?post=3040"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/tags?post=3040"},{"taxonomy":"newstopic","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/newstopic?post=3040"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}