滚动时如果没有 body 内容与导航重叠，就不能使用模糊滤镜使导航栏变粘吗？
Can't make navbar sticky with a blur filter without body content overlapping nav while scroll?
我想制作一个具有模糊效果的粘性导航栏，如 https://headlessui.dev/react/menu（尝试滚动以查看导航上的模糊效果）。它应该看起来像：
这是我的 HTML 的样子：
<header class="sticky z-10 top-10">
<nav class="backdrop-filter backdrop-blur flex items-center justify-center h-16 font-semibold text-sm after:absolute after:inset-x-0 after:w-full after:h-12 after:shadow-hr after:z-[-1] mt-12">
<section class="h-full">
<a class="flex items-center justify-center h-full pl-4" href="/"
><svg width="176" height="177" viewBox="0 0 176 177" xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 fill-current dark:text-white -rotate-6"><path d="M56.576.872h4.352l20.224 70.144L51.712 177H.512L56.576.872zm57.6 144.896H71.424l10.752-39.424h20.48L72.448.872h46.848L175.36 177h-52.224l-8.96-31.232z" fill="currentColor"></path></svg><span class="text-lg sr-only">Home</span></a
>
</section>
<section class="h-full">
<ul class="flex items-center justify-center h-full">
<li class="mx-4"><a class="text-lg font-bold text-gray-700/75 hover:text-gray-900 dark:text-white/50 dark:hover:text-white" href="/essays">Essays</a></li>
<li class="mx-4"><a class="text-lg font-bold text-gray-700/75 hover:text-gray-900 dark:text-white/50 dark:hover:text-white" href="/tutorials">Tutorials</a></li>
<li class="mx-4"><a class="text-lg font-bold text-gray-700/75 hover:text-gray-900 dark:text-white/50 dark:hover:text-white" href="/snippets">Snippets</a></li>
<li class="mx-4"><a class="text-lg font-bold text-gray-700/75 hover:text-gray-900 dark:text-white/50 dark:hover:text-white" href="/tips">Tips</a></li>
<li class="mx-4"><a class="text-lg font-bold text-gray-700/75 hover:text-gray-900 dark:text-white/50 dark:hover:text-white" href="/feed.xml">RSS</a></li>
<li class="mx-4"><a class="text-lg font-bold text-gray-700/75 hover:text-gray-900 dark:text-white/50 dark:hover:text-white" href="/about">About</a></li>
</ul>
</section>
</nav>
</header>
<h1 class="text-5xl font-bold text-center font-serif mt-20">All Essays By Date</h1>
<h2 class="w-3/4 mx-auto mt-4 mb-8 text-lg font-semibold text-center text-gray-700 dark:text-gray-300 sm:w-2/4">Scroll down to browse all of my essays by date and title. Essays are listed in reverse chronological order with my newest essay at the top and my oldest essay at the bottom.</h2>
<main class="prose block mx-auto">
<p>Have you ever visited a website and been completely in awe of the elegance and simplicity of its design? For me, that website is <a target="_blank" rel="noopener noreferrer" href="https://stripe.com/">Stripe</a>. Stripe is a company that allows people and businesses to accept payments online and in mobile apps. That doesn't sound like a company that would have an exquisite website design, but look at how Stripe describes themselves on their about page.</p>
<blockquote>
<p>"We think that building an internet business is a problem rooted in code and design, not finance."</p>
</blockquote>
<p>Rather than making design an afterthought, it's treated as a first-class citizen at Stripe. You can almost feel the hours of work spent iterating over designs and making minor tweaks when viewing the website's pages. In this article, I'm going to break down how Stripe creates these beautiful designs and give some tips and tricks to web designers and developers alike.</p>
<h3 id="the-design">
<a href="#the-design" class="anchor"><span class="icon icon-link"></span></a>The Design
</h3>
<div style="display: inline-block; max-width: 100%; overflow: hidden; position: relative; box-sizing: border-box; margin: 0px;">
<div style="box-sizing: border-box; display: block; max-width: 100%;"></div>
</div>
<p>Pictured above is the design for Stripe's main landing page. At first glance, here's what really sticks out to me:</p>
<ol>
<li>Crisp typography</li>
<li>Stunning color palette</li>
<li>High-quality images</li>
<li>Bold call-to-action buttons</li>
</ol>
<p>Let's start with the first observation: the font.</p>
<h3 id="typography">
<a href="#typography" class="anchor"><span class="icon icon-link"></span></a>Typography
</h3>
<p>Stripe uses a font called <a target="_blank" rel="noopener noreferrer" href="https://www.fontshop.com/families/camphor">Camphor</a>. It's a modern, uncluttered, sans serif font designed by Nick Job in 2010. It <em>really</em> shines here and looks great in a variety of weights.</p>
<div style="display: inline-block; max-width: 100%; overflow: hidden; position: relative; box-sizing: border-box; margin: 0px;">
<div style="box-sizing: border-box; display: block; max-width: 100%;"> </div>
<p>Let's see how we can make our font as crisp and clear as possible. First, we'll define our font family to be Camphor along with some fallback fonts. <strong>Note:</strong> Camphor is not free and should be purchased if you're planning to use it in production. However, I did find a <a target="_blank" rel="noopener noreferrer" href="https://gist.github.com/bdno86/d1f49b6f533df3f832b39d6cc3194303">gist containing the font</a> which you can mess around with.</p>
<p>We can utilize the <code>text-rendering</code> CSS property to allow us to choose quality over speed, as well as some vendor specific properties to make our font sharper. <strong>Note:</strong> These should work for Chrome, Safari, and Firefox on Mac.</p>
<pre class="language-css"><code class="language-css"><span class="token selector">body</span> <span class="token punctuation">{</span>
<span class="token property">font-family</span><span class="token punctuation">:</span> Camphor<span class="token punctuation">,</span> Open Sans<span class="token punctuation">,</span> Segoe UI<span class="token punctuation">,</span> sans-serif<span class="token punctuation">;</span>
<span class="token property">text-rendering</span><span class="token punctuation">:</span> optimizeLegibility<span class="token punctuation">;</span>
<span class="token property">-webkit-font-smoothing</span><span class="token punctuation">:</span> antialiased<span class="token punctuation">;</span>
<span class="token property">-moz-osx-font-smoothing</span><span class="token punctuation">:</span> grayscale<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
<h3 id="example">
<a href="#example" class="anchor"><span class="icon icon-link"></span></a>Example
</h3>
<p>In this example, I apply <code>-webkit-font-smoothing</code> followed by <code>text-rendering</code>.</p>
</main>
相关部分仅为nav部分。样板文件的其余部分是添加内容以启用滚动。
我创建了一个Tailwind Play reproduction。
基本上，我想使用没有重叠内容的粘性导航滚动。我怎样才能达到这种效果？
我将 backdrop-filter backdrop-blur 添加到 nav 以添加模糊效果，但内容滚动到 nav 上方，因为我的 height 可能还不够。
我添加了一些 height 到 header 和一堆其他属性，例如：
height: 92px;
background: darkred;
position: relative;
top: 0;
但不会完全达到 top。我想我需要添加一个背景颜色类似于 body 的普通 ol' div，但我不知道应该把它放在哪里？或者它应该在 header?
如果有意义的话，我希望导航基本上是突出的，内容在其下方滚动。我该怎么做？
我设法使用一些技巧使内容变得模糊：
- 将
margin 更改为 padding 因此 mt-12 变为 pt-12
- 已添加
pb-10
- 已将
backdrop-filter backdrop-blur 从 nav 更改为 header
这是已更改的代码：
<header
className="sticky top-0 z-10 pt-12 pb-10 backdrop-filter backdrop-blur
dark:bg-primary dark:text-white"
>
<nav
className="flex items-center justify-center h-16 font-semibold text-sm
after:absolute after:inset-x-0 after:w-full after:h-12 after:shadow-hr after:z-[-1]"
></nav>
</header>
我想制作一个具有模糊效果的粘性导航栏，如 https://headlessui.dev/react/menu（尝试滚动以查看导航上的模糊效果）。它应该看起来像：
这是我的 HTML 的样子：
<header class="sticky z-10 top-10">
<nav class="backdrop-filter backdrop-blur flex items-center justify-center h-16 font-semibold text-sm after:absolute after:inset-x-0 after:w-full after:h-12 after:shadow-hr after:z-[-1] mt-12">
<section class="h-full">
<a class="flex items-center justify-center h-full pl-4" href="/"
><svg width="176" height="177" viewBox="0 0 176 177" xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 fill-current dark:text-white -rotate-6"><path d="M56.576.872h4.352l20.224 70.144L51.712 177H.512L56.576.872zm57.6 144.896H71.424l10.752-39.424h20.48L72.448.872h46.848L175.36 177h-52.224l-8.96-31.232z" fill="currentColor"></path></svg><span class="text-lg sr-only">Home</span></a
>
</section>
<section class="h-full">
<ul class="flex items-center justify-center h-full">
<li class="mx-4"><a class="text-lg font-bold text-gray-700/75 hover:text-gray-900 dark:text-white/50 dark:hover:text-white" href="/essays">Essays</a></li>
<li class="mx-4"><a class="text-lg font-bold text-gray-700/75 hover:text-gray-900 dark:text-white/50 dark:hover:text-white" href="/tutorials">Tutorials</a></li>
<li class="mx-4"><a class="text-lg font-bold text-gray-700/75 hover:text-gray-900 dark:text-white/50 dark:hover:text-white" href="/snippets">Snippets</a></li>
<li class="mx-4"><a class="text-lg font-bold text-gray-700/75 hover:text-gray-900 dark:text-white/50 dark:hover:text-white" href="/tips">Tips</a></li>
<li class="mx-4"><a class="text-lg font-bold text-gray-700/75 hover:text-gray-900 dark:text-white/50 dark:hover:text-white" href="/feed.xml">RSS</a></li>
<li class="mx-4"><a class="text-lg font-bold text-gray-700/75 hover:text-gray-900 dark:text-white/50 dark:hover:text-white" href="/about">About</a></li>
</ul>
</section>
</nav>
</header>
<h1 class="text-5xl font-bold text-center font-serif mt-20">All Essays By Date</h1>
<h2 class="w-3/4 mx-auto mt-4 mb-8 text-lg font-semibold text-center text-gray-700 dark:text-gray-300 sm:w-2/4">Scroll down to browse all of my essays by date and title. Essays are listed in reverse chronological order with my newest essay at the top and my oldest essay at the bottom.</h2>
<main class="prose block mx-auto">
<p>Have you ever visited a website and been completely in awe of the elegance and simplicity of its design? For me, that website is <a target="_blank" rel="noopener noreferrer" href="https://stripe.com/">Stripe</a>. Stripe is a company that allows people and businesses to accept payments online and in mobile apps. That doesn't sound like a company that would have an exquisite website design, but look at how Stripe describes themselves on their about page.</p>
<blockquote>
<p>"We think that building an internet business is a problem rooted in code and design, not finance."</p>
</blockquote>
<p>Rather than making design an afterthought, it's treated as a first-class citizen at Stripe. You can almost feel the hours of work spent iterating over designs and making minor tweaks when viewing the website's pages. In this article, I'm going to break down how Stripe creates these beautiful designs and give some tips and tricks to web designers and developers alike.</p>
<h3 id="the-design">
<a href="#the-design" class="anchor"><span class="icon icon-link"></span></a>The Design
</h3>
<div style="display: inline-block; max-width: 100%; overflow: hidden; position: relative; box-sizing: border-box; margin: 0px;">
<div style="box-sizing: border-box; display: block; max-width: 100%;"></div>
</div>
<p>Pictured above is the design for Stripe's main landing page. At first glance, here's what really sticks out to me:</p>
<ol>
<li>Crisp typography</li>
<li>Stunning color palette</li>
<li>High-quality images</li>
<li>Bold call-to-action buttons</li>
</ol>
<p>Let's start with the first observation: the font.</p>
<h3 id="typography">
<a href="#typography" class="anchor"><span class="icon icon-link"></span></a>Typography
</h3>
<p>Stripe uses a font called <a target="_blank" rel="noopener noreferrer" href="https://www.fontshop.com/families/camphor">Camphor</a>. It's a modern, uncluttered, sans serif font designed by Nick Job in 2010. It <em>really</em> shines here and looks great in a variety of weights.</p>
<div style="display: inline-block; max-width: 100%; overflow: hidden; position: relative; box-sizing: border-box; margin: 0px;">
<div style="box-sizing: border-box; display: block; max-width: 100%;"> </div>
<p>Let's see how we can make our font as crisp and clear as possible. First, we'll define our font family to be Camphor along with some fallback fonts. <strong>Note:</strong> Camphor is not free and should be purchased if you're planning to use it in production. However, I did find a <a target="_blank" rel="noopener noreferrer" href="https://gist.github.com/bdno86/d1f49b6f533df3f832b39d6cc3194303">gist containing the font</a> which you can mess around with.</p>
<p>We can utilize the <code>text-rendering</code> CSS property to allow us to choose quality over speed, as well as some vendor specific properties to make our font sharper. <strong>Note:</strong> These should work for Chrome, Safari, and Firefox on Mac.</p>
<pre class="language-css"><code class="language-css"><span class="token selector">body</span> <span class="token punctuation">{</span>
<span class="token property">font-family</span><span class="token punctuation">:</span> Camphor<span class="token punctuation">,</span> Open Sans<span class="token punctuation">,</span> Segoe UI<span class="token punctuation">,</span> sans-serif<span class="token punctuation">;</span>
<span class="token property">text-rendering</span><span class="token punctuation">:</span> optimizeLegibility<span class="token punctuation">;</span>
<span class="token property">-webkit-font-smoothing</span><span class="token punctuation">:</span> antialiased<span class="token punctuation">;</span>
<span class="token property">-moz-osx-font-smoothing</span><span class="token punctuation">:</span> grayscale<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
<h3 id="example">
<a href="#example" class="anchor"><span class="icon icon-link"></span></a>Example
</h3>
<p>In this example, I apply <code>-webkit-font-smoothing</code> followed by <code>text-rendering</code>.</p>
</main>
相关部分仅为nav部分。样板文件的其余部分是添加内容以启用滚动。
我创建了一个Tailwind Play reproduction。
基本上，我想使用没有重叠内容的粘性导航滚动。我怎样才能达到这种效果？
我将 backdrop-filter backdrop-blur 添加到 nav 以添加模糊效果，但内容滚动到 nav 上方，因为我的 height 可能还不够。
我添加了一些 height 到 header 和一堆其他属性，例如：
height: 92px;
background: darkred;
position: relative;
top: 0;
但不会完全达到 top。我想我需要添加一个背景颜色类似于 body 的普通 ol' div，但我不知道应该把它放在哪里？或者它应该在 header?
如果有意义的话，我希望导航基本上是突出的，内容在其下方滚动。我该怎么做？
我设法使用一些技巧使内容变得模糊：
- 将
margin更改为padding因此mt-12变为pt-12 - 已添加
pb-10 - 已将
backdrop-filter backdrop-blur从nav更改为header
这是已更改的代码：
<header
className="sticky top-0 z-10 pt-12 pb-10 backdrop-filter backdrop-blur
dark:bg-primary dark:text-white"
>
<nav
className="flex items-center justify-center h-16 font-semibold text-sm
after:absolute after:inset-x-0 after:w-full after:h-12 after:shadow-hr after:z-[-1]"
></nav>
</header>