How to Capture a Website Screenshot with a Sticky Header Visible

To show a sticky header exactly as it appears while scrolling, scroll the page until the header is visibly stuck, then capture the current viewport. To include the whole document, use a full-page capture and inspect the result: sticky elements can render differently across pages and capture modes.

First decide what the screenshot needs to prove: the header’s live position while scrolling, or the page’s entire content. A viewport screenshot preserves the visible state. A full-page screenshot is taller and may not represent the header’s behavior at one particular scroll position.

1. Choose the capture that matches your goal

Goal	Capture	Check
Show the header fixed at a particular scroll position	Visible viewport	The header is in view and the page is at the desired scroll position
Show the complete page	Full page	The header and content are laid out as intended in the tall image
Show only the header or another region	Element or area capture	The crop includes the context needed to understand the header

Sticky behavior is controlled by the page’s CSS and can depend on its scroll container, JavaScript, viewport size, and layout. Browser documentation describes capture modes, but does not guarantee that every site’s sticky elements will appear identically in every full-page output. Always inspect the saved image.

2. Capture the visible sticky state in Firefox

Open the page and scroll until the header reaches the position you want to show.
Open Firefox’s screenshot tool by right-clicking an empty part of the page and choosing Take Screenshot, or use Ctrl+Shift+S on Windows or Linux, or Command+Shift+S on macOS. Shortcuts can vary by platform or Firefox release.
Choose Save visible to capture the viewport as it currently appears.
Save the image or copy it to the clipboard, then open it and check that the header is visible and unobstructed.

Firefox’s screenshot tool also offers a full-page capture and options for selecting a region or page part. Use Save full page when the whole document matters; do not assume it will preserve the same sticky state as the visible viewport.

3. Use Firefox DevTools for full-page, element, or delayed captures

Firefox DevTools offers a whole-page screenshot button. If it is missing, open DevTools settings and enable Take a screenshot of the entire page under Available Toolbox Buttons. To capture a particular DOM element, inspect it and choose Screenshot Node from the Inspector context menu.

The Web Console’s :screenshot helper provides additional controls, including full-page mode (--fullpage), element selection (--selector), a delay, device-pixel-ratio selection, a filename, and clipboard output. A delay can help when a menu or hover state needs time to appear. Consult the Firefox screenshot helper documentation for the current syntax and available parameters.

Use an element capture if the header itself is the subject, but remember that a cropped header alone may not show that it is sticky. To demonstrate the behavior, include some page content beneath it or capture the viewport after scrolling.

4. Capture with Chrome DevTools

Chrome DevTools documents screenshots of a node, a node larger than the screen, a mobile view, a full page, or an area. For the live sticky state, scroll until the header is stuck and use a viewport capture. For the whole document, choose full-page capture and review the image for missing, duplicated, or unexpectedly positioned content.

See Chrome DevTools screenshots for the documented capture types and current steps. If the desired option is not immediately visible, use the DevTools command menu and search for screenshot commands available in your Chrome version.

5. Capture repeatedly with browser automation

For a one-off screenshot, browser tools are usually enough. For repeatable captures, run a browser automation script that loads the page, scrolls to the required position, waits for the page to settle, and saves the viewport. The following Playwright example uses Node.js and captures the current viewport after scrolling. Install Playwright with npm install playwright and install its browser with npx playwright install chromium.

const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch({ headless: true });
  const page = await browser.newPage({
    viewport: { width: 1440, height: 900 },
    deviceScaleFactor: 1,
  });

  try {
    await page.goto('https://example.com', {
      waitUntil: 'domcontentloaded',
      timeout: 30000,
    });

    // Replace this with a reliable selector for the page's sticky header.
    const header = page.locator('header').first();
    await header.waitFor({ state: 'visible', timeout: 10000 });

    // Scroll the document so the header enters its sticky state.
    await page.evaluate(() => window.scrollTo(0, 600));
    await page.waitForTimeout(500);
    await header.screenshot({ path: 'header.png' });

    // Capture the viewport too, so the sticky state has page context.
    await page.screenshot({ path: 'sticky-header-viewport.png' });
  } finally {
    await browser.close();
  }
})();

Adjust the scroll position to the page’s layout. If the site scrolls an inner container instead of the window, scroll that container. If the header selector matches multiple elements, use a more specific selector. The element screenshot and viewport screenshot answer different questions; retain the one that matches the purpose of your evidence or documentation.

6. Common problems and fixes

Problem	Likely cause	Fix
The header is not stuck in the image	The page was captured before scrolling far enough, or the wrong container was scrolled	Scroll the correct container until the header visibly sticks, then take a viewport screenshot
The full-page screenshot shows the header in an unexpected position	Full-page capture may lay out or stitch a long page differently from a live viewport	Use a viewport capture for the exact scrolled state; inspect full-page output before sharing
The header is missing from an element screenshot	The selected node is a wrapper, hidden duplicate, or not the visible header	Inspect the DOM and select the rendered header node; use a viewport capture if needed
A menu or hover state disappears	The capture happened before the state appeared or pointer focus changed	Use a delay in Firefox’s screenshot helper or automation, and capture after opening the state
The image is blurry	The device pixel ratio or output scaling is too low for the intended use	Increase device-pixel-ratio settings where available, or capture at a larger viewport; verify the resulting dimensions
Automation times out waiting for the page	The site has slow or indefinite network activity, or the navigation condition is too strict	Use an appropriate navigation wait condition, set a bounded timeout, and wait explicitly for the header selector

7. Reliability, performance, and output checks

Keep the viewport consistent. Header wrapping and sticky thresholds can change with viewport width and height. Record the dimensions when screenshots need to be comparable.
Wait for the state, not just navigation. A page can finish loading before a delayed banner, menu, or client-rendered header is ready. Wait for the relevant element and allow transitions to complete.
Use a bounded wait. Waiting for all network activity can hang on analytics or long-lived connections. Prefer a specific selector or a short, intentional delay when the site does not become network-idle.
Inspect dynamic content. Ads, animations, cookie dialogs, and lazy-loaded sections may change between captures. Check that the header remains visible and the screenshot has the intended context.
Pick an appropriate format and scale. PNG is useful when sharp edges and text matter; compressed formats may reduce file size. Larger viewports and higher pixel ratios produce larger files and can increase capture time and memory use.

Or skip the browser setup

ScreenshotNeo is a website screenshot API and MCP server. For a live sticky-header state, a screenshot service cannot infer the exact scroll position you want: use the browser steps above when that state matters. For repeatable captures where a normal page screenshot is sufficient, this one-call request returns an image. See the ScreenshotNeo API documentation for available parameters.

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"},
    timeout=90,
)
open("shot.webp", "wb").write(r.content)

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot request failed: ${res.status}`);
const fs = await import('node:fs/promises');
await fs.writeFile('shot.webp', Buffer.from(await res.arrayBuffer()));

ScreenshotNeo removes cookie and consent banners, newsletter popups, and chat widgets before capture; bot checks, blank pages, failed loads, and cache hits are not billed. Its MCP server lets AI agents use screenshot, page information, and PDF capture tools. The free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 screenshots. This API call captures a page screenshot; use the browser method when you need to establish a particular live scroll position.

FAQ

Should I use a viewport or full-page screenshot?

Use a viewport capture to show the header in its actual visible state at a chosen scroll position. Use full-page capture to show the complete document, then inspect how the header rendered.

Can a full-page screenshot prove that a header is sticky?

Usually it is clearer to capture the viewport after scrolling, because that shows the header fixed over page content. A tall image alone may not establish the live scroll behavior.

Can I save a screenshot directly from Firefox?

Yes. Firefox’s screenshot interface can save an image or copy it to the clipboard, and it includes visible and full-page capture options.

What if the page scrolls inside a panel?

Scroll the panel that owns the sticky header. Scrolling the window will not activate sticky behavior tied to a nested scroll container.