MeDo

AI页头生成器。

描述你页面的顶部，MeDo会构建整条横带 — Logo与品牌标识组合、位于其上方的可选公告栏、带毛玻璃模糊的吸顶滚动行为，以及CTA。导航链接就住在里面；页头是把它们框起来的一切。

页头
页头

页头是唯一一个出现在每个页面上的组件

无论落地页、文档和结账流程之间还有什么在变，页头始终不变。这让它成为承载品牌识别的元素，同时也成为性能出错代价最高的位置：一个在字体加载时发生位移、或在水合前没有预留高度的页头，会在访客看到的每一个页面上产生布局偏移，而不只是某一页。吸顶行为同样有这个倍数效应。一个在每个滚动帧都重绘的模糊，会让整站的流畅度都打折。正因为它只生成一次却处处使用，页头值得在提示词里过度细化地描述。

6 个模板

可以生成的 页头 模板

每个模板都是真实的提示词，而不是截图。复制到任意 AI 编辑器，或在 MeDo 中运行，直接拿到 React + Tailwind 代码。

Fixed heightAcme

Sticky Header With a Frosted Scroll State

The default worth starting from: a pinned height and a blur that only appears once you have scrolled. Specifying the height is the whole point — a header that sizes to its content shifts on every page as the webfont swaps in.

Create a sticky website header with an explicit 64px height set on the container so the space is reserved before the logo and webfonts load. Logo mark plus wordmark on the left, four navigation links in the middle, one filled Get started button on the right. Start with a solid white background and a 1px bottom border, then switch to a semi-transparent surface with a backdrop blur once the page scrolls past 80px, transitioning over 200ms. Drive the state from an IntersectionObserver watching a 1px sentinel above the header rather than a scroll listener, so nothing runs on the scroll thread. Below 768px, replace the links with a hamburger that opens a drawer.

在 MeDo 中尝试
Announcement barMega

Promo Bar Above a Sticky Row

Two stacked strips where only the lower one stays pinned. The trap is the sticky offset: dismiss the bar without recomputing it and the header floats 36px below the viewport top for the rest of the session.

Create a two-part header: a dismissible 36px announcement bar on an accent background with a short promo line, an inline link and a close button, and beneath it a 64px main row with logo, links and a CTA. Only the main row is sticky. Persist the dismissal in localStorage so the bar does not return on the next page, and recompute the sticky top offset when it is removed so the main row still pins flush to the viewport top. Render the bar server-side and hide it with a class rather than mounting it after hydration, so dismissing it never causes a visible reflow of the page below.

在 MeDo 中尝试
TransparentShipfast

Transparent Over Hero, Solid on Scroll

For landing pages with a full-bleed hero behind the header. Everything that depends on the background — logo variant, link color, border, button style — has to flip in one state change, not four.

Create a header that overlays a full-bleed hero image: fully transparent with no border at the top of the page, with a light logo variant and white links. Once the page scrolls past the hero height, switch in a single state change to a solid white surface, a dark logo variant, dark links and a 1px bottom border, transitioning over 200ms. Keep the header height fixed at 72px in both states so the switch does not move the links. Add a scroll-margin-top equal to the header height on all headings so in-page anchors do not land behind the bar.

在 MeDo 中尝试
Two-rowShop

Utility Row Over a Sticky Search Row

A storefront header where the top row scrolls away and the search row stays. Pinning both eats 100px of a phone viewport, which is most of a product image.

Create a two-row e-commerce header. The top row, 32px tall, carries a free-shipping message on the left and Track order, Help and account links on the right, and scrolls away with the page. The bottom row, 64px tall, holds the logo, a wide search input, a wishlist icon and a cart button with a count badge, and is the only row that stays sticky. Announce cart count changes through an aria-live="polite" region. Below 768px, collapse the top row entirely, keep logo, search icon and cart in the sticky row, and open search as a full-width overlay when the icon is tapped.

在 MeDo 中尝试
App shellDocs

Fixed Header With a Sidebar Toggle

A docs header that has to coordinate with a sidebar below it. Reserve the toggle button's space at every breakpoint, otherwise the logo jumps sideways when the button appears at the tablet threshold.

Create a fixed 56px documentation header: a sidebar toggle button on the far left that is only interactive below 1024px but keeps its 40px slot reserved at every breakpoint so the logo never shifts, then the logo, a version switcher, a search button with a Command-K hint, a theme toggle and a GitHub link. Because the header is fixed rather than sticky, add matching top padding to the page body and set scroll-margin-top on every heading so deep links from search land below the bar. Give the toggle aria-expanded and aria-controls pointing at the sidebar element.

在 MeDo 中尝试
StaticStudio

Oversized Wordmark, No Sticky

Not everything needs to be pinned. A tall static header that scrolls away gives an agency site its full viewport back, and removes the scroll listener along with it.

Create a static header for a design studio that scrolls away with the page rather than sticking: 120px tall, with an oversized lowercase wordmark on the left, a one-line location and availability note beneath it, and four right-aligned links in a light weight with wide letter spacing. No border, no background change, no scroll listener at all. Below 640px, reduce the height to 80px, keep the wordmark, and move the four links into a full-screen overlay opened by a text Menu button — labelled Menu rather than a hamburger icon, and closing on Escape with focus returned to the button.

在 MeDo 中尝试

如何自定义你的 页头

在调任何样式之前先钉住高度

明确要求一个页头高度。这只花一行，却能消除本来会在每个页面上随Logo和网页字体加载而出现的布局偏移 — 这是最常见的、可追溯到页头的Core Web Vitals退化。

给滚动状态做节流

靠裸滚动监听器切换的backdrop blur每秒会重绘几十次。明确要求滚动处理函数用requestAnimationFrame节流，或改由IntersectionObserver哨兵元素驱动，这样中端设备上的滚动也能保持顺滑。

把公告栏当成页头的一部分

如果想在主行上方放一条促销带，请在同一个提示词里描述它，让它的高度被计入吸顶偏移。事后再加上去，要么遮住内容，要么在关闭后把自身高度重复计算一次。

精确说明品牌标识组合

说清你要的是只有图标、图标加文字标识，还是在小屏上退化为只剩图标的文字标识。页头是每个页面上都有的唯一组件，品牌一致性正是在这里被守住或丢掉。

谁在使用 页头 组件

SaaS产品网站

一个64px高、高度固定的白色页头，滚动后加上毛玻璃模糊，上方还有一条可关闭的公告栏，在整个活动期间投放上线促销。

电商网站

双行页头：上行放包邮横幅和账户链接，下行放搜索和购物车，购物者滚动时只有下行保持吸顶。

营销或落地页

一个覆盖在满幅主视觉图上的透明页头，滚动时过渡为实色背景，Logo在同一断点从浅色版本切换为深色版本。

开发者文档网站

一个带版本切换器和搜索触发器的固定页头，外加一个在平板断点以下出现的侧边栏开关，它会预留自己的空间，让文档内容永不重排。

不同网站的 页头 方案

同一个 页头 组件，针对它所在网站的类型做调整。

01 / 06

SaaS Product Header

One fixed-height sticky strip with a brand lockup, links and a single CTA. Because it renders on every route, any layout shift here is multiplied across your whole Core Web Vitals field data rather than isolated to the landing page.

页头 的风格与变体

挑选与页面其余部分匹配的变体，然后生成它。

01 / 06

Fixed-Height Sticky Header

An explicit height on the container, pinned to the top. The height is not a styling detail — without it the strip resizes as the logo and webfonts resolve, and that shift lands on every page a visitor opens.

在 React、Next.js、Vue 与 Svelte 中使用 页头

React、Next.js、Vue 3、SvelteKit、Astro 或纯 HTML —— 同一个 页头，六种接入方式。

01 / 06

React Header

Keep the scroll state in the header itself with an IntersectionObserver on a sentinel div, not a scroll listener. Render it once above your router outlet so the observer is created once per session.

src/components/Header.tsx

export function Header() {
  const [pinned, setPinned] = useState(false)
  const ref = useRef(null)

  useEffect(() => {
    const io = new IntersectionObserver(
      ([e]) => setPinned(!e.isIntersecting)
    )
    io.observe(ref.current)
    return () => io.disconnect()
  }, [])

  return <header className={pinned ? 'backdrop-blur' : ''} />
}

如何把 页头 加入项目

四个步骤，从挑选 页头 模板到上线生产环境。

01~30s

Pick a Header Template

Decide two things first: does the strip stay pinned, and is there an announcement bar. Those choices drive the sticky offset and the scroll state, and they are the awkward ones to retrofit.

02~10s

Copy the Prompt

Paste it into MeDo, Lovable, Bolt, v0 or Cursor. Keep the explicit pixel height and the sentinel-based scroll state in the text — those two sentences are what stop the header shifting and repainting on every page.

03~1min

Generate and Refine

You get React + Tailwind back with a live preview. Follow up in plain English — "make the blur stronger", "persist the dismissed announcement bar", "flip the logo variant on scroll".

04~2min

Mount It in Your Layout

Put the header above {children} in your root layout. If it is fixed rather than sticky, add matching top padding to the body and scroll-margin-top to your headings so anchor links do not land underneath it.

关于 页头 的常见问题

什么是AI页头生成器？

AI页头生成器是一种工具，它接受您对网站的自然语言描述，自动生成完整、有样式的页头组件的HTML、CSS和JavaScript。无需从零编写布局代码，只需描述想要的效果即可获得可工作的代码。

如何用AI创建网站页头？

打开MeDo，输入类似"为设计公司创建一个吸顶页头，左侧放Logo，包含作品、关于、联系链接，右侧放'联系我们'按钮"的提示词，MeDo即生成完整组件。然后您可以复制代码或通过后续提示词继续编辑。

能用AI生成响应式页头吗？

可以。MeDo默认生成移动优先的页头。告诉它您关心的断点或设备 — "768px以下折叠为汉堡菜单" — 它会为您处理响应式逻辑。

页头（header）和导航栏（navbar）有什么区别？

页头是每个页面顶部那条通栏横带：品牌标识组合、可选的公告栏、吸顶与滚动行为，以及容纳这一切的容器。导航栏是其中的那组导航链接。如果你关心的是整站范围内页面顶部的外观与行为，就做页头；如果你的问题其实是链接结构、下拉菜单和移动端菜单，请查看AI导航栏生成器。

怎样避免页头造成布局偏移？

在提示词里给页头一个明确高度，让浏览器在字体和Logo加载前就预留出空间；如果有公告栏，也一并预留位置，而不是让它在水合之后把内容往下推。如果页头用的是fixed而不是position: sticky，请给页面主体加上等量的顶部内边距。向MeDo要一个固定的页头高度，它会把两者都处理好。

生成网站页头最好的AI工具是什么？

MeDo专为从提示词生成单个网站组件而构建，包括页头。与通用AI聊天工具不同，MeDo理解组件结构、无障碍要求和真实世界的UX模式 — 因此输出更接近资深前端开发者会交付的成果。

立即用 MeDo 生成你的 页头。

尝试任何提示词 — 免费，无需注册。

免费开始构建查看定价
导航栏

导航栏

描述您的网站，获得完全响应式导航栏 — 包含Logo、导航链接、下拉菜单和移动端汉堡菜单 — 从一个提示词生成。无需模板，无需繁琐调整。

相关组件
英雄区块

英雄区块

写一句话描述你在构建什么，即可获得完整的首屏英雄区块——标题、副标题、行动号召和布局——立即可用。

相关组件
面包屑导航

面包屑导航

输入提示词，几秒钟内获得完整样式的面包屑导航组件。MeDo理解您的网站结构，生成简洁、无障碍的路径标记 — 随时可嵌入任意页面。

相关组件