Ability to stick header to the top of the page

[Wirone]

What does this PR change? What problem does it solve?

If enabled (using stickyHeader param), header with top menu will be always visible regardless of scrolling.

Live Demo.

• Works on desktop and mobile
• Supports dark/light modes
• 100% backward compatible

Was the change discussed in an issue or in the Discussions before?

No.

PR Checklist

• [ ] This change adds/updates translations and I have used the template present here.
• [x] I have enabled maintainer edits for this PR.
• [x] I have verified that the code works as described/as intended.
• [ ] This change adds a Social Icon which has a permissive license to use it.
• [x] This change does not include any CDN resources/links.
• [x] This change does not include any unrelated scripts such as bash and python scripts.
• [ ] This change updates the overridden internal templates from HUGO's repository.

[sonarqubecloud[bot]]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.0% Duplication

[ngntrgduc]

Thanks for the great feature~. But it will hide some content after clicking on the Table of Contents.

Here is my workaround: add this to the assets/css/common/header.css

html {
    scroll-padding-top: calc(var(--header-height) * 2);
}

I hope this help.

[sonarqubecloud[bot]]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.0% Duplication

[Wirone]

@ngntrgduc Thanks for the great tip! I encountered this issue on my blog, but ignored it as I did not want to spend my time on it, however I've just applied your snippet and it really helps 🙂. Just added it to this PR.

I am not up-to-date with modern CSS tricks, so let me know if there's a way of applying this to html conditionally when header has header-sticky class included. Maybe there's no need to apply header-sticky also to html 😉.

[sonarqubecloud[bot]]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.0% Duplication