bilden
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone/push Build is passing
Details
This commit is contained in:
parent
8277de849c
commit
bd1fb6c500
|
@ -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 -->
|
||||
|
|
Loading…
Reference in New Issue