How to Capture a Full-Page Screenshot of a Website with Sticky Navigation

For a quick manual capture, use Firefox’s full-page screenshot button or run :screenshot page.png --fullpage in its Web Console. For repeatable developer automation, use Playwright’s await page.screenshot({ path: 'page.png', fullPage: true }). A sticky or fixed navigation bar may repeat or overlap content in some capture implementations, so inspect the saved image and temporarily hide or unstick the bar if needed.

1. Capture a full page in Firefox

Firefox includes a built-in screenshot workflow. The toolbar button may need to be enabled first:

1. Open the page you want to capture.
2. Open Developer Tools, then its settings.
3. Under Available Toolbox Buttons, enable Take a screenshot of the entire page.
4. Use the screenshot button and choose the full-page capture option. Firefox can save the result to Downloads.

For a direct command, open the Web Console and enter:

:screenshot page.png --fullpage

Firefox’s screenshot helper also supports a delay, a device-pixel ratio, a filename, clipboard copying, and targeting an element with a CSS selector. Consult the Firefox screenshot documentation for the current syntax and options. The Firefox tips page also documents the --fullpage command in the Web Console: Firefox DevTools tips.

If repeated captures use the same filename, Firefox warns that the new image will overwrite the old one. Choose a distinct filename when keeping multiple versions.

2. Capture a full page with Playwright

For automated or repeatable captures, Playwright’s fullPage: true option captures the full scrollable page as if it fit on a very tall screen. Here is a runnable Node.js example:

import { chromium } from 'playwright';

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

try {
  await page.goto('https://example.com', { waitUntil: 'networkidle' });
  await page.screenshot({ path: 'page.png', fullPage: true });
} finally {
  await browser.close();
}

Install Playwright and its browser if you do not already have them:

npm install playwright
npx playwright install chromium

Use the official Playwright screenshot guide for full-page and locator screenshot options. A normal viewport capture omits content outside the viewport; fullPage: true asks Playwright to include the full scrollable page.

Capture one element instead

If you need just the navigation, a content section, or a card, capture a locator rather than the entire document:

const header = page.locator('header');
await header.screenshot({ path: 'header.png' });

Use a selector that identifies the intended element uniquely. If the selector matches multiple elements, narrow it before capturing.

3. Check how sticky navigation rendered

“Full page” describes the requested output size, but the result depends on how the browser or capture implementation renders the page. In some scrolling capture implementations, fixed navigation or advertising can appear repeatedly in the assembled image. Dynamic content loaded near the bottom can also cause overlaps. These behaviors are implementation-dependent rather than guaranteed Firefox or Playwright behavior; inspect your own output, especially on pages with sticky headers, ads, lazy-loaded images, or infinite scrolling. A University of Tartu thesis documents these failure modes in the implementation it describes: the thesis on scrolling capture.

1. Open the saved image at its original size.
2. Check the top, middle, and bottom for repeated navigation, covered text, missing sections, or seams.
3. If the bar repeats or obscures content, inspect the navigation element in Developer Tools. Temporarily disable its sticky or fixed positioning, or hide it, then capture again.
4. Restore the page’s original styling after the capture. This CSS workaround is a practical troubleshooting step, not a guarantee for every page or capture method.

When changing the page temporarily, a CSS rule such as position: static !important on the inspected navigation element can test whether sticky positioning is the cause. Some sites use nested containers or JavaScript to control the header, so the relevant selector and fix vary by site.

4. Prepare dynamic and unusually long pages

Pages that load content as you scroll need extra care. A screenshot can miss content that has not yet appeared, and an infinite-scroll page may never have a natural end.

• Wait for the page’s main content or a known selector before capturing.
• For lazy-loaded images, scroll through the page before the final capture, then allow images to settle.
• For infinite scrolling, decide on a stopping point and capture only the intended content; otherwise the page may keep growing.
• Keep the browser viewport consistent across runs so layout changes do not shift the captured page.
• For very long documents, consider capturing sections separately if one giant image is difficult to inspect, share, or open.

Playwright example that waits for a known content element before capture:

await page.goto('https://example.com', { waitUntil: 'domcontentloaded' });
await page.locator('main').waitFor({ state: 'visible' });
await page.screenshot({ path: 'page.png', fullPage: true });

Use a selector that reflects the page’s actual ready state. Network activity can continue because of analytics, polling, or chat tools, so waiting for the specific content your capture needs can be more suitable than waiting for every network request to stop.

5. Or skip the browser setup

ScreenshotNeo is a website screenshot API and MCP server. One GET request returns an image or PDF; see the API documentation for options, including full-page capture.

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

Cookie banners are accepted and removed before the shot, along with known consent platforms, newsletter popups, and chat widgets. Bot checks, blank pages, failed loads, timeouts, and cache hits are not billed; response headers report the page verdict and billing status. Its MCP server lets AI agents use take_screenshot, get_page_info, and capture_pdf. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000 screenshots.

Sign up free and get 1,000 screenshots a month with no card.

6. Troubleshooting

Problem	Likely cause	What to try
Firefox screenshot button is missing	The toolbox button is not enabled.	Enable Take a screenshot of the entire page in Developer Tools settings under Available Toolbox Buttons, or use :screenshot page.png --fullpage in the Web Console.
Navigation appears more than once	The capture method may render a fixed or sticky element at multiple scroll positions.	Inspect the image. Temporarily hide the bar or set its positioning to static, capture again, and restore the page.
Text is covered by the header	The sticky header overlaps content during capture or page layout.	Try the temporary CSS adjustment above. Check the page at the captured viewport width too, since responsive layouts may change the header.
Images or sections are missing	Lazy loading or client-side rendering had not completed.	Wait for the relevant selector, scroll through lazy content, and capture after it has rendered.
Sections overlap or have seams	Content changed size or loaded while the capture was being produced.	Wait for dynamic content to settle and repeat the capture. If the page keeps changing, capture stable sections separately.
The Playwright command fails before capture	The browser may not be installed, the page may not have loaded, or the selector may not exist.	Install Chromium with npx playwright install chromium, check navigation errors, and verify selectors against the page.
A saved screenshot replaces an earlier one	The same output filename was used again.	Use a unique filename or move the previous file before saving.

7. Performance, reliability, and cost

Full-page images can be much taller and larger than viewport captures. A wider viewport can also change responsive layout and image dimensions. Pick the smallest viewport and output dimensions that preserve the details you need, and avoid capturing an unbounded page. For repeatability, use the same browser version, viewport, wait condition, and page state across runs.

Browser automation gives you control over the browser and page state, but you must manage browser installation, navigation, readiness, and output files. Firefox is convenient for one-off captures; Playwright is suited to scripted workflows. Neither the cited documentation nor the research establishes a universal method that always handles sticky navigation correctly, so output inspection remains part of the workflow.

ScreenshotNeo’s stated plans are Free: 1,000 shots per month; Starter: $5 for 3,000; Growth: $15 for 15,000; Pro: $39 for 60,000; Scale: $99 for 250,000; Business: $249 for 1,000,000. Yearly billing gives two months free, and every feature is available on every plan. Only clean shots are billed. Check the documentation for request options and response billing headers when estimating usage.

8. FAQ

Does a full-page screenshot always include a sticky header only once?

No universal behavior is established. Capture implementations differ; inspect the output for your page and browser.

Can I capture just the navigation bar?

Yes. In Playwright, capture a locator such as page.locator('header'); Firefox’s screenshot helper also supports a CSS selector target.

Should I hide sticky navigation for every capture?

No. First inspect the result. Adjust the bar only if it repeats or obscures content.

Can I use a full-page image for a page that scrolls forever?

Set a deliberate stopping point or capture selected sections. An infinite-scroll page may keep adding content as you move down it.