bilden
continuous-integration/drone/push Build is passing Details

This commit is contained in:
Joakim Svensson 2025-05-09 14:47:40 +00:00
parent 8277de849c
commit bd1fb6c500
1 changed files with 26 additions and 13 deletions

View File

@ -21,27 +21,40 @@ title: Start
</script>
<script>
function toggleMenuVisibility() {
window.addEventListener("scroll", () => {
const content = document.getElementById("main-content");
const header = document.querySelector(".md-header");
const sidebar = document.querySelector(".md-sidebar");
const contentTop = content.getBoundingClientRect().top;
if (contentTop <= 0) {
header.style.opacity = "1";
sidebar.style.opacity = "1";
header.style.pointerEvents = "auto";
sidebar.style.pointerEvents = "auto";
} else {
header.style.opacity = "0";
sidebar.style.opacity = "0";
const contentY = content.getBoundingClientRect().top;
const windowHeight = window.innerHeight;
// Hur många pixlar innan "main-content" som menyn ska börja synas
const fadeStart = windowHeight * 0.2;
const fadeEnd = windowHeight * 0.8;
// Beräkna scrollbaserad opacitet (0 till 1)
let opacity = 1 - (contentY - fadeStart) / (fadeEnd - fadeStart);
opacity = Math.max(0, Math.min(1, opacity)); // begränsa mellan 0 och 1
// Tillämpa opacitet
header.style.opacity = opacity;
sidebar.style.opacity = opacity;
// Hantera klickbarhet så man inte klickar på osynlig meny
if (opacity < 0.05) {
header.style.pointerEvents = "none";
sidebar.style.pointerEvents = "none";
} else {
header.style.pointerEvents = "auto";
sidebar.style.pointerEvents = "auto";
}
}
});
window.addEventListener("scroll", toggleMenuVisibility);
window.addEventListener("load", toggleMenuVisibility);
window.addEventListener("load", () => {
// Initiera rätt opacitet direkt vid sidladdning
window.dispatchEvent(new Event("scroll"));
});
</script>
<!-- Bakgrundsbild med filter -->