Sticky Header

Free — GPL coresize Splanned, not built

Generated from docs/plan/core/sticky-header/PLAN.md in the AstroBaaS repository. Nothing described below is implemented — it is the written plan for it.

Sticky Header is a core feature that keeps the navigation header and cart icon visible as customers scroll down. It enables quick access to cart and search without scrolling back to top.

The problem

Customers scroll deep into a product page and can’t access the cart or search without scrolling back up; checkout abandonment increases.

What it does

• Sticky positioning of header (remains visible on scroll) with logo, navigation, cart, search
• Adaptive sticky header (show/hide on scroll up/down to save space)
• Admin setting: enable/disable sticky header, opacity/shadow styling (configurable)
• Smooth scroll-to-top on logo click and mobile sticky header collapsible on scroll
• Responsive behavior: accessible from any scroll position

What it deliberately does NOT do

Each boundary carries its reason. A boundary without a reason gets crossed by the next person who reads this.

• Does NOT support custom sticky header components (reason: frontend theme responsibility)
• Does NOT provide CSS styling (reason: theme owns styling)
• Does NOT track sticky header interaction (reason: analytics feature)

Data model

New fields: settings.sticky_header_enabled (bool, default: true), settings.sticky_header_adaptive (bool, default: false), settings.sticky_header_opacity (float 0-1, default: 1.0).

API

• GET /api/settings/sticky-header
• PATCH /api/settings/sticky-header {enabled, adaptive, opacity}

Every route added here must also appear in src/pages/openapi.json.ts — a test fails the build if it does not.

Admin

Settings toggle (enable/disable); adaptive mode toggle; opacity slider; preview showing sticky behavior on scroll.

The seam — why this is core

Core owns: sticky header settings, API. Frontend owns: CSS position, scroll handling, styling.

Core owns the interface + honest sticky header; UI behavior is storefront infrastructure, not a credential or support commitment.

Dependencies

• Assumes header component exists in frontend

Acceptance checks

Each of these must be able to fail. Before claiming this is done, break the code deliberately and watch each one go red.

• Header remains visible when scrolling down product page
• Logo click scrolls to top smoothly
• Cart icon accessible from any scroll position
• Sticky header can be disabled via admin setting
• Adaptive mode: header hides on scroll down, shows on scroll up
• Opacity adjustable 0 (transparent) to 1 (opaque)
• All storage drivers support settings equally

Risks

Performance: sticky positioning may cause jank if not GPU-accelerated. Space: reduces viewport height; mobile UX suffers if header large. Adaptive mode lag on low-end devices.

Commercial context

The anchor is what the nearest equivalent charges on Shopify or Magento today. It is context for a pricing decision, not the decision.

---

Generated from the commerce plan. See docs/COMMERCE-PLAN.md for the full catalogue and ../../AI-GUIDE.md for how to work on this repository.