{"id":303595,"date":"2020-02-21T14:48:49","date_gmt":"2020-02-21T21:48:49","guid":{"rendered":"https:\/\/css-tricks.com\/?p=303595"},"modified":"2020-02-21T16:49:30","modified_gmt":"2020-02-21T23:49:30","slug":"fixed-headers-and-jump-links-the-solution-is-scroll-margin-top","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/fixed-headers-and-jump-links-the-solution-is-scroll-margin-top\/","title":{"rendered":"Fixed Headers and Jump Links? The Solution is scroll-margin-top"},"content":{"rendered":"\n<p>The problem: you click a jump link like <code>&lt;a href=\"#header-3\"&gt;Jump&lt;\/a&gt;<\/code> which links to something like <code>&lt;h3 id=\"header-3\"&gt;Header&lt;\/h3&gt;<\/code>. That&#8217;s totally fine, until you have a <code>position: fixed;<\/code> header at the top of the page obscuring the header you&#8217;re trying to link to!<\/p>\n\n\n\n<p>Fixed headers have a nasty habit of hiding the element you&#8217;re trying to link to. <\/p>\n\n\n\n<!--more-->\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/02\/hidden-header.png?resize=482%2C177&#038;ssl=1\" alt=\"\" class=\"wp-image-303597\" width=\"482\" height=\"177\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>There used to be <a href=\"https:\/\/css-tricks.com\/hash-tag-links-padding\/\">all kinds of wild hacks<\/a> to get around this problem. In fact, in the design of CSS-Tricks as I write, I was like, &#8220;<em>Screw it, I&#8217;ll just have a big generous <code>padding-top<\/code> on my in-article headers because I don&#8217;t mind that look anyway.&#8221; <\/em><\/p>\n\n\n\n<p>But there is actually a really straightforward way of handling this in CSS now. <\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">h3 {\n  scroll-margin-top: 5rem; \/* whatever is a nice number that gets you past the header *\/\n}<\/code><\/pre>\n\n\n\n<p><a href=\"http:\/\/css-tricks.com\/almanac\/properties\/s\/scroll-margin\/\">We have an Almanac article on it<\/a>, which includes browser support, which is essentially everywhere. It&#8217;s often talked about in conjunction with <a href=\"https:\/\/css-tricks.com\/practical-css-scroll-snapping\/\">scroll snapping<\/a>, but I find this use case even more practical. <\/p>\n\n\n\n<p>Here&#8217;s a simple demo:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_GRJpopp\" src=\"\/\/codepen.io\/anon\/embed\/GRJpopp?height=450&amp;theme-id=1&amp;slug-hash=GRJpopp&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed GRJpopp\" title=\"CodePen Embed GRJpopp\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>In a related vein, that weird (but cool) &#8220;text fragments&#8221; link that Chrome shipped takes you to <a href=\"https:\/\/twitter.com\/chriscoyier\/status\/1225199469446090752\" rel=\"noopener\">the middle of the page<\/a> instead, which I think is nice.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The problem: you click a jump link like &lt;a href=&#8221;#header-3&#8243;&gt;Jump&lt;\/a&gt; which links to something like &lt;h3 id=&#8221;header-3&#8243;&gt;Header&lt;\/h3&gt;. That&#8217;s totally fine, until you have a position: fixed; header at the top of the page obscuring the header you&#8217;re trying to link to! Fixed headers have a nasty habit of hiding the element you&#8217;re trying to link [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":303606,"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":[1113,1331,11750,1640],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/02\/sticky-header.gif?fit=600%2C300&ssl=1","jetpack-related-posts":[{"id":285389,"url":"https:\/\/css-tricks.com\/fixed-headers-on-page-links-and-overlapping-content-oh-my\/","url_meta":{"origin":303595,"position":0},"title":"Fixed Headers, On-Page Links, and Overlapping Content, Oh My!","date":"April 3, 2019","format":false,"excerpt":"Let's take a basic on-page link: <a href=\"#section-two\">Section Two<\/a> When clicked, the browser will scroll itself to the element with that ID: <a href=\"#section-two\">Section Two<\/a>. A browser feature as old as browsers themselves, just about. But as soon as position: fixed; came into play, it became a bit of an\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/04\/anchor.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":7862,"url":"https:\/\/css-tricks.com\/hash-tag-links-padding\/","url_meta":{"origin":303595,"position":1},"title":"Hash Tag Links That Don&#8217;t Headbutt The Browser Window","date":"November 16, 2010","format":false,"excerpt":"Using hash-tag links with a fixed position header can be problematic, as the element may be hidden underneath the header as the browser will scroll until the element headbutts the top of browser viewport. There are a couple of ways we can fix this...","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":312635,"url":"https:\/\/css-tricks.com\/on-adding-ids-to-headers\/","url_meta":{"origin":303595,"position":2},"title":"On Adding IDs to Headings","date":"June 11, 2020","format":false,"excerpt":"Here's a two-second review. If an element has an ID, you can link to it with natural browser behavior. It's great if headings have them, because it's often useful to link directly to a specific section of content. <h3 id=\"step-2\">Step 2<\/a> Should I be so inclined, I could link right\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/06\/hashes-pattern.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":13465,"url":"https:\/\/css-tricks.com\/persistent-headers\/","url_meta":{"origin":303595,"position":3},"title":"Persistent Headers","date":"August 14, 2011","format":false,"excerpt":"This is some code to get the header of some content area to stay visible at the top of the screen as you scroll through that content. Then go away when you've scrolled past that relevant section. Header... persisting. Couple things to know before we get started: There are many\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/08\/persistentheader.jpg?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":334042,"url":"https:\/\/css-tricks.com\/how-to-create-a-shrinking-header-on-scroll-without-javascript\/","url_meta":{"origin":303595,"position":4},"title":"How to Create a Shrinking Header on Scroll Without JavaScript","date":"February 16, 2021","format":false,"excerpt":"Imagine a header of a website that is nice and thick, with plenty of padding on top and bottom of the content. As you scroll down, it shrinks up on itself, reducing some of that padding, making more screen real estate for other content. Normally you would have to use\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/shrinking-sticky-header-1.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":338846,"url":"https:\/\/css-tricks.com\/sticky-headers-5-ways-to-make-them-better\/","url_meta":{"origin":303595,"position":5},"title":"Sticky Headers: 5 Ways to Make Them Better","date":"April 21, 2021","format":false,"excerpt":"Page Laubheimer says that if you're going to do a sticky header... Keep it small.Visually contrast it with the rest of the page.If it's going to move, keep it minimal. (I'd say, respect prefers-reduced-motion.)Consider \"partially persistent headers.\" (Jemima Abu calls it a Smart Navbar.)Actually, maybe don't even do it. I\u2026","rel":"","context":"In &quot;Link&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":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/303595"}],"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=303595"}],"version-history":[{"count":5,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/303595\/revisions"}],"predecessor-version":[{"id":304122,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/303595\/revisions\/304122"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/303606"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=303595"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=303595"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=303595"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}