Problem description

Given a page with a main header and a subheader within the page content, implement both elements so that as the user scrolls:

• The main header sticks to the top of the viewport immediately when it reaches the scroll threshold.

• The subheader sticks 50px below the top (below the main header) once its own scroll position is reached. Ensure that the subheader does not overlap the main header when both are sticky.

Goal

Implement two sticky elements with distinct top offsets so they stack correctly without overlap when the user scrolls.

Constraints

• Use CSS only (no JavaScript is allowed).

• Main header height is 50px and subheader height is 30px.

• The subheader must not stick until after the main header is in its sticky position.

• All positioning should be relative to the viewport, not to other containers.

Sample visual output

Here’s what the output would look like:

Good luck trying the problem! If you’re unsure how to proceed, check the Solution.