static/frontend/search: sticky header style polish

Change-Id: I3950462df70fbbbe0948a8dcc5ee6feb746c873e
Reviewed-on: https://go-review.googlesource.com/c/pkgsite/+/349549
Trust: Jamal Carvalho <jamal@golang.org>
Run-TryBot: Jamal Carvalho <jamal@golang.org>
TryBot-Result: kokoro <noreply+kokoro@google.com>
Reviewed-by: Julie Qiu <julie@golang.org>
diff --git a/static/frontend/search/search.css b/static/frontend/search/search.css
index 6f9b337..b8fcfc8 100644
--- a/static/frontend/search/search.css
+++ b/static/frontend/search/search.css
@@ -17,9 +17,8 @@
   margin: 0.5rem 0 0;
 }
 .SearchResults-header[data-fixed] {
-  background-color: var(--color-background);
+  background-color: var(--color-background-accented);
   border-bottom: var(--border);
-  box-shadow: var(--box-shadow);
   height: 3.5rem;
   position: sticky;
   top: 0;
diff --git a/static/frontend/search/search.js b/static/frontend/search/search.js
index fedb67b..b1d9d80 100644
--- a/static/frontend/search/search.js
+++ b/static/frontend/search/search.js
@@ -1,4 +1,4 @@
-var r=document.querySelector(".js-siteHeader"),n=document.createElement("div");r==null||r.prepend(n);var c=new IntersectionObserver(([o])=>{if(o.intersectionRatio<1)for(let e of document.querySelectorAll('[class^="SearchResults-header"'))e.setAttribute("data-fixed","true");else for(let e of document.querySelectorAll('[class^="SearchResults-header"'))e.removeAttribute("data-fixed")},{threshold:1,rootMargin:"245px"});c.observe(n);var t=document.querySelector(".js-searchHeader");t==null||t.addEventListener("dblclick",o=>{var s;let e=o.target;(e===t||e===t.lastElementChild)&&((s=window.getSelection())==null||s.removeAllRanges(),window.scrollTo({top:0,behavior:"smooth"}))});
+var c=3.5,r=document.querySelector(".js-siteHeader"),n=document.createElement("div");r==null||r.prepend(n);var l=new IntersectionObserver(([o])=>{if(o.intersectionRatio<1)for(let e of document.querySelectorAll('[class^="SearchResults-header"'))e.setAttribute("data-fixed","true");else for(let e of document.querySelectorAll('[class^="SearchResults-header"'))e.removeAttribute("data-fixed")},{threshold:1,rootMargin:`${c*16*3}px`});l.observe(n);var t=document.querySelector(".js-searchHeader");t==null||t.addEventListener("dblclick",o=>{var s;let e=o.target;(e===t||e===t.lastElementChild)&&((s=window.getSelection())==null||s.removeAllRanges(),window.scrollTo({top:0,behavior:"smooth"}))});
 /**
  * @license
  * Copyright 2020 The Go Authors. All rights reserved.
diff --git a/static/frontend/search/search.js.map b/static/frontend/search/search.js.map
index 6bb0715..7b970b4 100644
--- a/static/frontend/search/search.js.map
+++ b/static/frontend/search/search.js.map
@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["search.ts"],
-  "sourcesContent": ["/**\n * @license\n * Copyright 2020 The Go Authors. All rights reserved.\n * Use of this source code is governed by a BSD-style\n * license that can be found in the LICENSE file.\n */\n\n// Append a div above the site header to use for the sticky header transition.\nconst siteHeader = document.querySelector('.js-siteHeader');\nconst headerSentinel = document.createElement('div');\nsiteHeader?.prepend(headerSentinel);\n\n/**\n * headerObserver watches the headerSentinel. When the headerSentinel is out of view a\n * callback function transitions the search results header in to the sticky position.\n */\nconst headerObserver = new IntersectionObserver(\n  ([e]) => {\n    if (e.intersectionRatio < 1) {\n      for (const x of document.querySelectorAll('[class^=\"SearchResults-header\"')) {\n        x.setAttribute('data-fixed', 'true');\n      }\n    } else {\n      for (const x of document.querySelectorAll('[class^=\"SearchResults-header\"')) {\n        x.removeAttribute('data-fixed');\n      }\n    }\n  },\n  { threshold: 1, rootMargin: '245px' }\n);\nheaderObserver.observe(headerSentinel);\n\n// Add an event listener to scroll to the top of the page when the whitespace on the\n// header is double clicked.\nconst searchHeader = document.querySelector('.js-searchHeader');\nsearchHeader?.addEventListener('dblclick', e => {\n  const target = e.target;\n  if (target === searchHeader || target === searchHeader.lastElementChild) {\n    window.getSelection()?.removeAllRanges();\n    window.scrollTo({ top: 0, behavior: 'smooth' });\n  }\n});\n\nexport {};\n"],
-  "mappings": "AAAA,AAQA,GAAM,GAAa,SAAS,cAAc,kBACpC,EAAiB,SAAS,cAAc,OAC9C,WAAY,QAAQ,GAMpB,GAAM,GAAiB,GAAI,sBACzB,CAAC,CAAC,KAAO,CACP,GAAI,EAAE,kBAAoB,EACxB,OAAW,KAAK,UAAS,iBAAiB,kCACxC,EAAE,aAAa,aAAc,YAG/B,QAAW,KAAK,UAAS,iBAAiB,kCACxC,EAAE,gBAAgB,eAIxB,CAAE,UAAW,EAAG,WAAY,UAE9B,EAAe,QAAQ,GAIvB,GAAM,GAAe,SAAS,cAAc,oBAC5C,WAAc,iBAAiB,WAAY,GAAK,CAnChD,MAoCE,GAAM,GAAS,EAAE,OACjB,AAAI,KAAW,GAAgB,IAAW,EAAa,mBACrD,WAAO,iBAAP,QAAuB,kBACvB,OAAO,SAAS,CAAE,IAAK,EAAG,SAAU",
+  "sourcesContent": ["/**\n * @license\n * Copyright 2020 The Go Authors. All rights reserved.\n * Use of this source code is governed by a BSD-style\n * license that can be found in the LICENSE file.\n */\n\nconst headerHeight = 3.5;\n\n// Append a div above the site header to use for the sticky header transition.\nconst siteHeader = document.querySelector('.js-siteHeader');\nconst headerSentinel = document.createElement('div');\nsiteHeader?.prepend(headerSentinel);\n\n/**\n * headerObserver watches the headerSentinel. When the headerSentinel is out of view a\n * callback function transitions the search results header in to the sticky position.\n */\nconst headerObserver = new IntersectionObserver(\n  ([e]) => {\n    if (e.intersectionRatio < 1) {\n      for (const x of document.querySelectorAll('[class^=\"SearchResults-header\"')) {\n        x.setAttribute('data-fixed', 'true');\n      }\n    } else {\n      for (const x of document.querySelectorAll('[class^=\"SearchResults-header\"')) {\n        x.removeAttribute('data-fixed');\n      }\n    }\n  },\n  { threshold: 1, rootMargin: `${headerHeight * 16 * 3}px` }\n);\nheaderObserver.observe(headerSentinel);\n\n// Add an event listener to scroll to the top of the page when the whitespace on the\n// header is double clicked.\nconst searchHeader = document.querySelector('.js-searchHeader');\nsearchHeader?.addEventListener('dblclick', e => {\n  const target = e.target;\n  if (target === searchHeader || target === searchHeader.lastElementChild) {\n    window.getSelection()?.removeAllRanges();\n    window.scrollTo({ top: 0, behavior: 'smooth' });\n  }\n});\n\nexport {};\n"],
+  "mappings": "AAAA,AAOA,GAAM,GAAe,IAGf,EAAa,SAAS,cAAc,kBACpC,EAAiB,SAAS,cAAc,OAC9C,WAAY,QAAQ,GAMpB,GAAM,GAAiB,GAAI,sBACzB,CAAC,CAAC,KAAO,CACP,GAAI,EAAE,kBAAoB,EACxB,OAAW,KAAK,UAAS,iBAAiB,kCACxC,EAAE,aAAa,aAAc,YAG/B,QAAW,KAAK,UAAS,iBAAiB,kCACxC,EAAE,gBAAgB,eAIxB,CAAE,UAAW,EAAG,WAAY,GAAG,EAAe,GAAK,QAErD,EAAe,QAAQ,GAIvB,GAAM,GAAe,SAAS,cAAc,oBAC5C,WAAc,iBAAiB,WAAY,GAAK,CArChD,MAsCE,GAAM,GAAS,EAAE,OACjB,AAAI,KAAW,GAAgB,IAAW,EAAa,mBACrD,WAAO,iBAAP,QAAuB,kBACvB,OAAO,SAAS,CAAE,IAAK,EAAG,SAAU",
   "names": []
 }
diff --git a/static/frontend/search/search.min.css b/static/frontend/search/search.min.css
index c4e9206..a4e17da 100644
--- a/static/frontend/search/search.min.css
+++ b/static/frontend/search/search.min.css
@@ -3,5 +3,5 @@
  * Use of this source code is governed by a BSD-style
  * license that can be found in the LICENSE file.
  */
-.go-SearchForm{display:none}.SearchResults{font-size:.875rem;padding-top:.75rem}.SearchResults-header{margin:.5rem 0 0}.SearchResults-header[data-fixed]{background-color:var(--color-background);border-bottom:var(--border);box-shadow:var(--box-shadow);height:3.5rem;position:sticky;top:0}.SearchResults-headerContent{align-items:center;display:flex;gap:.5rem;height:100%;margin:auto;max-width:63rem;padding:.5rem var(--gutter)}.SearchResults-headerLogo{--logo-height: 1.75rem;--logo-width: calc(var(--logo-height) / .3768);align-items:center;display:flex;margin-right:-.5rem;opacity:0;transition:opacity .25s ease-in-out,width .25s ease-out;visibility:hidden;width:0}.SearchResults-headerLogo[data-fixed]{margin-right:.5rem;opacity:1;visibility:visible;width:var(--logo-width)}.SearchResults-headerLogo img{height:var(--logo-height);margin:-1rem 0;width:var(--logo-width)}.SearchResults-search{flex-grow:1;max-width:31.5rem}.SearchResults-tabs{border-bottom:var(--border)}.SearchResults-tabs nav{margin:auto;max-width:63rem;padding:0 var(--gutter)}.SearchResults-summary{color:var(--color-text-subtle);display:flex;flex-direction:column;gap:1rem;justify-content:space-between;line-height:1.5rem;margin:-.25rem 0 .25rem}@media only screen and (min-width: 64rem){.SearchResults-summary{align-items:baseline;flex-direction:row}}.SearchResults-summary h1{font-size:inherit;font-weight:inherit}.SearchResults-emptyContentMessage{text-align:center}.SearchSnippet{display:flex;flex-direction:column;gap:.375rem;padding:0 0 2.75rem}.SearchSnippet h2{font-size:1.25rem;font-weight:400}.SearchSnippet:last-of-type{padding:0 0 1rem}.SearchSnippet-synopsis{-webkit-box-orient:vertical;display:-webkit-box;-webkit-line-clamp:2;overflow:hidden;text-overflow:ellipsis}.SearchSnippet-infoLabel{display:flex;flex-wrap:wrap;gap:.5rem 1rem;margin-top:-.0625rem}.SearchSnippet-sub{align-items:center;display:flex;flex-wrap:wrap;gap:.5rem}.SearchSnippet-symbolCode{font-size:.75rem;margin:.25rem 0}.SearchSnippet-sub a[data-hidden]{display:none}.SearchSnippet-sub a{color:var(--color-text-subtle)}.SearchSnippet-sub a:hover{color:var(--color-brand-primary)}.SearchSnippet-headerContainer{align-items:center;display:flex;flex-wrap:wrap;gap:.5rem}.SearchSnippet-header-name{color:var(--color-text)}.SearchSnippet-header-dash{color:var(--color-text-subtle)}.SearchSnippet-symbolKind{color:var(--color-text)}.SearchPagination{height:1.5rem}
+.go-SearchForm{display:none}.SearchResults{font-size:.875rem;padding-top:.75rem}.SearchResults-header{margin:.5rem 0 0}.SearchResults-header[data-fixed]{background-color:var(--color-background-accented);border-bottom:var(--border);height:3.5rem;position:sticky;top:0}.SearchResults-headerContent{align-items:center;display:flex;gap:.5rem;height:100%;margin:auto;max-width:63rem;padding:.5rem var(--gutter)}.SearchResults-headerLogo{--logo-height: 1.75rem;--logo-width: calc(var(--logo-height) / .3768);align-items:center;display:flex;margin-right:-.5rem;opacity:0;transition:opacity .25s ease-in-out,width .25s ease-out;visibility:hidden;width:0}.SearchResults-headerLogo[data-fixed]{margin-right:.5rem;opacity:1;visibility:visible;width:var(--logo-width)}.SearchResults-headerLogo img{height:var(--logo-height);margin:-1rem 0;width:var(--logo-width)}.SearchResults-search{flex-grow:1;max-width:31.5rem}.SearchResults-tabs{border-bottom:var(--border)}.SearchResults-tabs nav{margin:auto;max-width:63rem;padding:0 var(--gutter)}.SearchResults-summary{color:var(--color-text-subtle);display:flex;flex-direction:column;gap:1rem;justify-content:space-between;line-height:1.5rem;margin:-.25rem 0 .25rem}@media only screen and (min-width: 64rem){.SearchResults-summary{align-items:baseline;flex-direction:row}}.SearchResults-summary h1{font-size:inherit;font-weight:inherit}.SearchResults-emptyContentMessage{text-align:center}.SearchSnippet{display:flex;flex-direction:column;gap:.375rem;padding:0 0 2.75rem}.SearchSnippet h2{font-size:1.25rem;font-weight:400}.SearchSnippet:last-of-type{padding:0 0 1rem}.SearchSnippet-synopsis{-webkit-box-orient:vertical;display:-webkit-box;-webkit-line-clamp:2;overflow:hidden;text-overflow:ellipsis}.SearchSnippet-infoLabel{display:flex;flex-wrap:wrap;gap:.5rem 1rem;margin-top:-.0625rem}.SearchSnippet-sub{align-items:center;display:flex;flex-wrap:wrap;gap:.5rem}.SearchSnippet-symbolCode{font-size:.75rem;margin:.25rem 0}.SearchSnippet-sub a[data-hidden]{display:none}.SearchSnippet-sub a{color:var(--color-text-subtle)}.SearchSnippet-sub a:hover{color:var(--color-brand-primary)}.SearchSnippet-headerContainer{align-items:center;display:flex;flex-wrap:wrap;gap:.5rem}.SearchSnippet-header-name{color:var(--color-text)}.SearchSnippet-header-dash{color:var(--color-text-subtle)}.SearchSnippet-symbolKind{color:var(--color-text)}.SearchPagination{height:1.5rem}
 /*# sourceMappingURL=search.min.css.map */
diff --git a/static/frontend/search/search.min.css.map b/static/frontend/search/search.min.css.map
index d28f96b..d41df9c 100644
--- a/static/frontend/search/search.min.css.map
+++ b/static/frontend/search/search.min.css.map
@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["search.css"],
-  "sourcesContent": ["/*\n * Copyright 2021 The Go Authors. All rights reserved.\n * Use of this source code is governed by a BSD-style\n * license that can be found in the LICENSE file.\n */\n\n/* Hide the search form in the header. */\n.go-SearchForm {\n  display: none;\n}\n\n.SearchResults {\n  font-size: 0.875rem;\n  padding-top: 0.75rem;\n}\n.SearchResults-header {\n  margin: 0.5rem 0 0;\n}\n.SearchResults-header[data-fixed] {\n  background-color: var(--color-background);\n  border-bottom: var(--border);\n  box-shadow: var(--box-shadow);\n  height: 3.5rem;\n  position: sticky;\n  top: 0;\n}\n.SearchResults-headerContent {\n  align-items: center;\n  display: flex;\n  gap: 0.5rem;\n  height: 100%;\n  margin: auto;\n  max-width: 63rem;\n  padding: 0.5rem var(--gutter);\n}\n.SearchResults-headerLogo {\n  --logo-height: 1.75rem;\n  --logo-width: calc(var(--logo-height) / 0.3768);\n\n  align-items: center;\n  display: flex;\n  margin-right: -0.5rem;\n  opacity: 0;\n  transition: opacity 0.25s ease-in-out, width 0.25s ease-out;\n  visibility: hidden;\n  width: 0;\n}\n.SearchResults-headerLogo[data-fixed] {\n  margin-right: 0.5rem;\n  opacity: 1;\n  visibility: visible;\n  width: var(--logo-width);\n}\n.SearchResults-headerLogo img {\n  height: var(--logo-height);\n  margin: -1rem 0;\n  width: var(--logo-width);\n}\n.SearchResults-search {\n  flex-grow: 1;\n  max-width: 31.5rem;\n}\n.SearchResults-tabs {\n  border-bottom: var(--border);\n}\n.SearchResults-tabs nav {\n  margin: auto;\n  max-width: 63rem;\n  padding: 0 var(--gutter);\n}\n.SearchResults-summary {\n  color: var(--color-text-subtle);\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  justify-content: space-between;\n  line-height: 1.5rem;\n  margin: -0.25rem 0 0.25rem 0;\n}\n@media only screen and (min-width: 64rem) {\n  .SearchResults-summary {\n    align-items: baseline;\n    flex-direction: row;\n  }\n}\n.SearchResults-summary h1 {\n  font-size: inherit;\n  font-weight: inherit;\n}\n.SearchResults-emptyContentMessage {\n  text-align: center;\n}\n\n.SearchSnippet {\n  display: flex;\n  flex-direction: column;\n  gap: 0.375rem;\n  padding: 0 0 2.75rem 0;\n}\n.SearchSnippet h2 {\n  font-size: 1.25rem;\n  font-weight: 400;\n}\n.SearchSnippet:last-of-type {\n  padding: 0 0 1rem 0;\n}\n.SearchSnippet-synopsis {\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.SearchSnippet-infoLabel {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.5rem 1rem;\n  margin-top: -0.0625rem;\n}\n.SearchSnippet-sub {\n  align-items: center;\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.5rem;\n}\n.SearchSnippet-symbolCode {\n  font-size: 0.75rem;\n  margin: 0.25rem 0;\n}\n.SearchSnippet-sub a[data-hidden] {\n  display: none;\n}\n.SearchSnippet-sub a {\n  color: var(--color-text-subtle);\n}\n.SearchSnippet-sub a:hover {\n  color: var(--color-brand-primary);\n}\n.SearchSnippet-headerContainer {\n  align-items: center;\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.5rem;\n}\n.SearchSnippet-header-name {\n  color: var(--color-text);\n}\n.SearchSnippet-header-dash {\n  color: var(--color-text-subtle);\n}\n.SearchSnippet-symbolKind {\n  color: var(--color-text);\n}\n.SearchPagination {\n  height: 1.5rem;\n}\n"],
-  "mappings": ";;;;;AAOA,eACE,aAGF,eACE,kBACA,mBAEF,sBAfA,iBAkBA,kCACE,yCACA,4BACA,6BACA,cACA,gBACA,MAEF,6BACE,mBACA,aACA,UACA,YA9BF,YAgCE,gBACA,4BAEF,0BACE,uBACA,+CAEA,mBACA,aACA,oBACA,UACA,wDACA,kBACA,QAEF,sCACE,mBACA,UACA,mBACA,wBAEF,8BACE,0BAtDF,eAwDE,wBAEF,sBACE,YACA,kBAEF,oBACE,4BAEF,wBAjEA,YAmEE,gBACA,wBAEF,uBACE,+BACA,aACA,sBACA,SACA,8BACA,mBA5EF,wBA+EA,0CACE,uBACE,qBACA,oBAGJ,0BACE,kBACA,oBAEF,mCACE,kBAGF,eACE,aACA,sBACA,YAhGF,oBAmGA,kBACE,kBACA,gBAEF,4BAvGA,iBA0GA,wBACE,4BACA,oBACA,qBACA,gBACA,uBAEF,yBACE,aACA,eACA,eACA,qBAEF,mBACE,mBACA,aACA,eACA,UAEF,0BACE,iBA9HF,gBAiIA,kCACE,aAEF,qBACE,+BAEF,2BACE,iCAEF,+BACE,mBACA,aACA,eACA,UAEF,2BACE,wBAEF,2BACE,+BAEF,0BACE,wBAEF,kBACE",
+  "sourcesContent": ["/*\n * Copyright 2021 The Go Authors. All rights reserved.\n * Use of this source code is governed by a BSD-style\n * license that can be found in the LICENSE file.\n */\n\n/* Hide the search form in the header. */\n.go-SearchForm {\n  display: none;\n}\n\n.SearchResults {\n  font-size: 0.875rem;\n  padding-top: 0.75rem;\n}\n.SearchResults-header {\n  margin: 0.5rem 0 0;\n}\n.SearchResults-header[data-fixed] {\n  background-color: var(--color-background-accented);\n  border-bottom: var(--border);\n  height: 3.5rem;\n  position: sticky;\n  top: 0;\n}\n.SearchResults-headerContent {\n  align-items: center;\n  display: flex;\n  gap: 0.5rem;\n  height: 100%;\n  margin: auto;\n  max-width: 63rem;\n  padding: 0.5rem var(--gutter);\n}\n.SearchResults-headerLogo {\n  --logo-height: 1.75rem;\n  --logo-width: calc(var(--logo-height) / 0.3768);\n\n  align-items: center;\n  display: flex;\n  margin-right: -0.5rem;\n  opacity: 0;\n  transition: opacity 0.25s ease-in-out, width 0.25s ease-out;\n  visibility: hidden;\n  width: 0;\n}\n.SearchResults-headerLogo[data-fixed] {\n  margin-right: 0.5rem;\n  opacity: 1;\n  visibility: visible;\n  width: var(--logo-width);\n}\n.SearchResults-headerLogo img {\n  height: var(--logo-height);\n  margin: -1rem 0;\n  width: var(--logo-width);\n}\n.SearchResults-search {\n  flex-grow: 1;\n  max-width: 31.5rem;\n}\n.SearchResults-tabs {\n  border-bottom: var(--border);\n}\n.SearchResults-tabs nav {\n  margin: auto;\n  max-width: 63rem;\n  padding: 0 var(--gutter);\n}\n.SearchResults-summary {\n  color: var(--color-text-subtle);\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  justify-content: space-between;\n  line-height: 1.5rem;\n  margin: -0.25rem 0 0.25rem 0;\n}\n@media only screen and (min-width: 64rem) {\n  .SearchResults-summary {\n    align-items: baseline;\n    flex-direction: row;\n  }\n}\n.SearchResults-summary h1 {\n  font-size: inherit;\n  font-weight: inherit;\n}\n.SearchResults-emptyContentMessage {\n  text-align: center;\n}\n\n.SearchSnippet {\n  display: flex;\n  flex-direction: column;\n  gap: 0.375rem;\n  padding: 0 0 2.75rem 0;\n}\n.SearchSnippet h2 {\n  font-size: 1.25rem;\n  font-weight: 400;\n}\n.SearchSnippet:last-of-type {\n  padding: 0 0 1rem 0;\n}\n.SearchSnippet-synopsis {\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.SearchSnippet-infoLabel {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.5rem 1rem;\n  margin-top: -0.0625rem;\n}\n.SearchSnippet-sub {\n  align-items: center;\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.5rem;\n}\n.SearchSnippet-symbolCode {\n  font-size: 0.75rem;\n  margin: 0.25rem 0;\n}\n.SearchSnippet-sub a[data-hidden] {\n  display: none;\n}\n.SearchSnippet-sub a {\n  color: var(--color-text-subtle);\n}\n.SearchSnippet-sub a:hover {\n  color: var(--color-brand-primary);\n}\n.SearchSnippet-headerContainer {\n  align-items: center;\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.5rem;\n}\n.SearchSnippet-header-name {\n  color: var(--color-text);\n}\n.SearchSnippet-header-dash {\n  color: var(--color-text-subtle);\n}\n.SearchSnippet-symbolKind {\n  color: var(--color-text);\n}\n.SearchPagination {\n  height: 1.5rem;\n}\n"],
+  "mappings": ";;;;;AAOA,eACE,aAGF,eACE,kBACA,mBAEF,sBAfA,iBAkBA,kCACE,kDACA,4BACA,cACA,gBACA,MAEF,6BACE,mBACA,aACA,UACA,YA7BF,YA+BE,gBACA,4BAEF,0BACE,uBACA,+CAEA,mBACA,aACA,oBACA,UACA,wDACA,kBACA,QAEF,sCACE,mBACA,UACA,mBACA,wBAEF,8BACE,0BArDF,eAuDE,wBAEF,sBACE,YACA,kBAEF,oBACE,4BAEF,wBAhEA,YAkEE,gBACA,wBAEF,uBACE,+BACA,aACA,sBACA,SACA,8BACA,mBA3EF,wBA8EA,0CACE,uBACE,qBACA,oBAGJ,0BACE,kBACA,oBAEF,mCACE,kBAGF,eACE,aACA,sBACA,YA/FF,oBAkGA,kBACE,kBACA,gBAEF,4BAtGA,iBAyGA,wBACE,4BACA,oBACA,qBACA,gBACA,uBAEF,yBACE,aACA,eACA,eACA,qBAEF,mBACE,mBACA,aACA,eACA,UAEF,0BACE,iBA7HF,gBAgIA,kCACE,aAEF,qBACE,+BAEF,2BACE,iCAEF,+BACE,mBACA,aACA,eACA,UAEF,2BACE,wBAEF,2BACE,+BAEF,0BACE,wBAEF,kBACE",
   "names": []
 }
diff --git a/static/frontend/search/search.ts b/static/frontend/search/search.ts
index 0b73ee4..486a8e6 100644
--- a/static/frontend/search/search.ts
+++ b/static/frontend/search/search.ts
@@ -5,6 +5,8 @@
  * license that can be found in the LICENSE file.
  */
 
+const headerHeight = 3.5;
+
 // Append a div above the site header to use for the sticky header transition.
 const siteHeader = document.querySelector('.js-siteHeader');
 const headerSentinel = document.createElement('div');
@@ -26,7 +28,7 @@
       }
     }
   },
-  { threshold: 1, rootMargin: '245px' }
+  { threshold: 1, rootMargin: `${headerHeight * 16 * 3}px` }
 );
 headerObserver.observe(headerSentinel);