|
27 | 27 | </style> |
28 | 28 | <style type="text/css"> |
29 | 29 | #header { |
30 | | - transition: box-shadow ease 250ms; |
| 30 | + background: var(--theme-foreground); |
| 31 | + color: var(--theme-background); |
| 32 | + transition: box-shadow ease 250ms, |
| 33 | + background-color linear 250ms, |
| 34 | + color linear 250ms; |
31 | 35 | } |
32 | | - #header.scrolled { |
| 36 | + #header.scrolled1 { |
33 | 37 | box-shadow: 0 0 6px rgba(0, 0, 0, 0.2); |
34 | 38 | } |
| 39 | + #header.scrolled2 { |
| 40 | + background: var(--theme-background); |
| 41 | + color: var(--theme-foreground); |
| 42 | + } |
35 | 43 | </style> |
36 | 44 | </head> |
37 | 45 | <body> |
38 | | - <header id="header" style="position: sticky; z-index: 10; top: 0; margin: -32px calc((100% - 100vw) / 2) 4rem; background: var(--theme-foreground); color: var(--theme-background); font: 500 16px/normal var(--sans-serif);"> |
| 46 | + <header id="header" style="position: sticky; z-index: 10; top: 0; margin: -32px calc((100% - 100vw) / 2) 4rem; font: 500 16px/normal var(--sans-serif);"> |
39 | 47 | <div style="display: flex; max-width: var(--max-width); padding: 1rem; margin: auto; gap: 1rem; justify-content: space-between;"> |
40 | 48 | <a href="/notebook-kit/" style="color: inherit; display: flex; align-items: center; gap: 0.5rem;"> |
41 | 49 | <svg role="img" width="24" height="24" viewBox="0 0 24 24" aria-label="Observable" fill="currentColor"> |
|
63 | 71 | document.querySelector("#edit-page").href += `/edit/main/docs${location.pathname.replace(/^\/notebook-kit\//, "/") + (location.pathname.endsWith("/") ? "index" : "")}.html`; |
64 | 72 | </script> |
65 | 73 | <script type="module"> |
66 | | - let scrolled = false; |
| 74 | + let scrolled1 = false; |
67 | 75 | const header = document.querySelector("#header"); |
68 | 76 | document.addEventListener("scroll", () => { |
69 | 77 | const s = scrollY > 0; |
70 | | - if (scrolled === s) return; |
71 | | - header.classList.toggle("scrolled", scrolled = s); |
| 78 | + if (scrolled1 === s) return; |
| 79 | + header.classList.toggle("scrolled1", scrolled1 = s); |
| 80 | + }); |
| 81 | + </script> |
| 82 | + <script type="module"> |
| 83 | + let scrolled2 = false; |
| 84 | + document.addEventListener("scroll", () => { |
| 85 | + const c = document.querySelector(".observablehq--cell"); |
| 86 | + const s = c?.getBoundingClientRect().bottom < 50; |
| 87 | + if (scrolled2 === s) return; |
| 88 | + header.classList.toggle("scrolled2", scrolled2 = s); |
72 | 89 | }); |
73 | 90 | </script> |
74 | 91 | <footer style="width: 100vw; margin: 2rem calc((100% - 100vw) / 2) -32px; padding-bottom: 16px; background-color: var(--theme-foreground); color: var(--theme-background); font: 12px/normal var(--sans-serif);"> |
|
0 commit comments