Sub-headers that stay in place on a webpage alongside a stationary page header

Question

Sub-headers that stay in place on a webpage alongside a stationary page header

I'm facing a challenge with my website where I have a fixed top-of-page header and I want the sub-headers in the content to be sticky. I've tried two different approaches using CSS, but unfortunately, neither of them is working as expected:

The first approach involves using position: fixed or position: sticky for the page header. This causes the rest of the page to scroll underneath the header, making the sub-headers invisible when they stick. They end up sticking to the top of the page instead of their own visible section. To fix this, I could set the top value to equal the height of the header, but this solution is not ideal as the header's height may vary.

Another drawback of this method is that the page scrollbar intrudes into the header area rather than being confined to the scrolling section.
The second approach involves using flex or grid to divide the page vertically into two sections - the header and a scrollable main section. While this does make the sub-headers stick correctly to the main section, it brings about other issues. Anchor links with #fragments no longer function reliably due to being inside a nested scrolling block. Additionally, there are significant bugs in mobile Safari where focusing on text input fields leads to the entire page scrolling instead of just the main section. The page becomes stuck, requiring a reload to resolve the issue. Here is someone else's report on this Safari bug and you can view their video showing the problem. (This bug can occur even without the nested scrolling div, but it exacerbates the situation.)

Finding a solution where the main header remains fixed while allowing the sub-headers to stick seems to be a common dilemma for many websites. Upon examining popular mobile sites like Google Docs, reddit, StackOverflow, and MDN, I noticed they opt for the first method mentioned above and sacrifice sticky sub-headers.

Any suggestions on achieving sticky sub-headers without resorting to creating a nested scrolling block? Or perhaps a workaround for Safari's scrolling flaw?

css sticky

Answer 1

Answer №1

Without reviewing your specific code, it's difficult to provide a definitive answer, but based on the information provided, option #1 seems to be the most suitable choice.

In most cases, using position: sticky for the navigation header bar should automatically adjust the main container. If not, and it ends up overlapping with your subheader and content, you can always add top padding to push down the main section content (including the subheader).

Consider the following example:

<body>
<nav class="navbar" role="navigation">Page Header</nav>
<main class="main-content">Your main content with subheader</main>
</body>

If you opt to use position: fixed:

.navbar {position: fixed; top: 0; height: 100px; z-index: 9999}

.main-content { padding-top: 100px; (if your page header is 100px in height) }

Be sure to adjust your padding accordingly based on your breakpoints.

Answer 2

Without reviewing your specific code, it's difficult to provide a definitive answer, but based on the information provided, option #1 seems to be the most suitable choice.

In most cases, using position: sticky for the navigation header bar should automatically adjust the main container. If not, and it ends up overlapping with your subheader and content, you can always add top padding to push down the main section content (including the subheader).

Consider the following example:

<body>
<nav class="navbar" role="navigation">Page Header</nav>
<main class="main-content">Your main content with subheader</main>
</body>

If you opt to use position: fixed:

.navbar {position: fixed; top: 0; height: 100px; z-index: 9999}

.main-content { padding-top: 100px; (if your page header is 100px in height) }

Be sure to adjust your padding accordingly based on your breakpoints.

Answer 3

Answer №2

After much consideration, I decided to implement solution #1, utilizing the position: sticky attribute for the main page header and adding a non-zero value to the top property for the sticky sub-headers. Since the height of the page header can vary, I utilized TypeScript to dynamically set this value:

function handleStickyHeaders() {
    const header = document.querySelector(".pageHeader");
    if (header === null) {
        return;
    }

    let customStyle: HTMLStyleElement | undefined = undefined;

    const resizeObserver = new ResizeObserver(entries => {
        // We are only observing one element.
        if (entries.length !== 1 || entries[0].borderBoxSize.length !== 1) {
            return;
        }

        // Retrieve the height of the page header.
        const headerHeight = entries[0].borderBoxSize[0].blockSize;

        // Create a dynamic stylesheet for all sub-headers.
        if (customStyle !== undefined) {
            customStyle.remove();
        }
        customStyle = document.createElement("style");
        customStyle.innerHTML= `
            .sub-header {
                top: ${headerHeight}px;
            }
        `;
        document.body.append(customStyle);
    });

    resizeObserver.observe(header);
}

The observer initiates immediately, eliminating the need for further manual initialization of the top property.

While this method does have the drawback of causing the scrollbar to jump to the top of the page, it is a minor inconvenience in the grand scheme of things.

Answer 4

After much consideration, I decided to implement solution #1, utilizing the position: sticky attribute for the main page header and adding a non-zero value to the top property for the sticky sub-headers. Since the height of the page header can vary, I utilized TypeScript to dynamically set this value:

function handleStickyHeaders() {
    const header = document.querySelector(".pageHeader");
    if (header === null) {
        return;
    }

    let customStyle: HTMLStyleElement | undefined = undefined;

    const resizeObserver = new ResizeObserver(entries => {
        // We are only observing one element.
        if (entries.length !== 1 || entries[0].borderBoxSize.length !== 1) {
            return;
        }

        // Retrieve the height of the page header.
        const headerHeight = entries[0].borderBoxSize[0].blockSize;

        // Create a dynamic stylesheet for all sub-headers.
        if (customStyle !== undefined) {
            customStyle.remove();
        }
        customStyle = document.createElement("style");
        customStyle.innerHTML= `
            .sub-header {
                top: ${headerHeight}px;
            }
        `;
        document.body.append(customStyle);
    });

    resizeObserver.observe(header);
}

The observer initiates immediately, eliminating the need for further manual initialization of the top property.

While this method does have the drawback of causing the scrollbar to jump to the top of the page, it is a minor inconvenience in the grand scheme of things.

Sub-headers that stay in place on a webpage alongside a stationary page header

Answer №1

Answer №2

Similar questions

"Unlocking the Power of jQuery: A Guide to Customizing CSS with Scroll Effects

Having trouble with CSS values not being applied to dynamically injected HTML div elements in Angular 4?

Utilizing the power of Angular 15 in conjunction with Bootstrap 5's SCSS

Challenges arise when utilizing CSS3 animations in conjunction with transitions triggered by toggling a JavaScript class

Attempting to dynamically resize SVG images based on the size of the window for better scalability

What are the steps to retrieve dynamic text values using Alpine.js?

What is the best way to dynamically change the color of my component depending on the prop passed to it?

Having trouble with changing the color of an element when the radio input is checked?

Reduced resolution decreases image size significantly (bootstrap-5 Fluid)

Scrolling to the next wrap class in jQuery is not functioning properly with the chatbox and ScrollTop

How to position two divs to the right of another div, without them being adjacent to each other, using CSS

Experiencing difficulties with JavaScript/jQuery when encountering the 'use strict' error

Achieving perfect alignment both horizontally and vertically using CSS3's viewport height of 100%

Expanding the hover state of a Bootstrap button

Replace all occurrences of the text/css style tag with an empty string using

Utilizing Ajax to dynamically update the color of a button when it is clicked from a different device

Using Bootstrap 4 to create a dropdown button with the functionality of a regular

Change the width of specific <li> elements to create variation

CSS and jQuery UI URLs are not resolving properly in MVC framework after deployment

Do not apply the css rule to the custom class