fix(header): add background on scroll to prevent content overlap

[codeurluce]

Fixes #624

When scrolling down, the sticky header currently has no background, causing underlying text to appear through it — reducing readability.

This PR:

• Adds a semi-transparent Kubernetes blue background (rgba(26, 117, 255, 0.95)) to .td-navbar when scrolled
• Uses a lightweight scroll listener to toggle the .scrolled class
• Loads the script via Docsy's body-end.html hook

No build or Go knowledge required — pure frontend fix.

/kind bug

[k8s-ci-robot]

Welcome @codeurluce!

It looks like this is your first PR to kubernetes/contributor-site 🎉. Please refer to our pull request process documentation to help your PR have a smooth ride to approval.

You will be prompted by a bot to use commands during the review process. Do not be afraid to follow the prompts! It is okay to experiment. Here is the bot commands documentation.

You can also check if kubernetes/contributor-site has its own contribution guidelines.

You may want to refer to our testing guide if you run into trouble with your tests not passing.

If you are having difficulty getting your pull request seen, please follow the recommended escalation practices. Also, for tips and tricks in the contribution process you may want to read the Kubernetes contributor cheat sheet. We want to make sure your contribution gets all the attention it needs!

Thank you, and welcome to Kubernetes. 😃

[k8s-ci-robot]

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by: codeurluce
Once this PR has been reviewed and has the lgtm label, please assign nimbinatus for approval. For more information see the Code Review Process.

The full list of commands accepted by this bot can be found here.

Details

Needs approval from an approver in each of these files:

• OWNERS

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

[lmktfy]

Thanks for the PR.

It's very tidy; rarely do I see a first contribution that is so well aligned to how we work.

Until I properly test this I won't add LGTM, but I am happy to have this change merged.

[lmktfy]

You might be able to reference $primary here (I haven't checked it this works), at 50% alpha.

[codeurluce]

Thanks for the suggestion, @lmktfy! I've updated the background color to use the $primary SCSS variable for better consistency with the theme. 😊

[lmktfy]

Actually, #614

The technical work is good but the alignment to put overall aims isn't quite there.