.
This commit is contained in:
@@ -26,23 +26,71 @@ const { tabHover5 } = Astro.props;
|
||||
const { tabHover6 } = Astro.props;
|
||||
---
|
||||
<script>
|
||||
window.addEventListener("scroll", (event) => {
|
||||
let scroll = window.scrollY;
|
||||
|
||||
window.addEventListener("scroll", () => {
|
||||
const skala = document.getElementById("skala");
|
||||
|
||||
// if(scroll>=400){
|
||||
//
|
||||
// document.getElementById('skala')?.classList.add('2xl:w-[calc(100%-6rem)]', '2xl:fixed','2xl:py-4','2xl:top-0','2xl:z-20' ,'2xl:[box-shadow:0_2px_12px_#ccc;]');
|
||||
// document.getElementById('formInput-1')?.classList.add('2xl:mt-[270px]');
|
||||
// }else{
|
||||
//
|
||||
// document.getElementById('skala')?.classList.remove('2xl:w-[calc(100%-6rem)]','2xl:fixed','2xl:py-4','2xl:top-0','2xl:z-20','2xl:[box-shadow:0_0_20px_#000;]');
|
||||
// document.getElementById('formInput-1')?.classList.remove('2xl:mt-[270px]');
|
||||
// }
|
||||
|
||||
if (!skala) return;
|
||||
|
||||
// Wenn skala "no-scroll" hat, alles zurücksetzen
|
||||
if (skala.classList.contains("no-scroll")) {
|
||||
skala.classList.remove(
|
||||
"2xl:fixed",
|
||||
"2xl:py-4",
|
||||
"2xl:top-0",
|
||||
"2xl:z-20"
|
||||
);
|
||||
skala.classList.add("w-full");
|
||||
skala.style.borderBottom = "none";
|
||||
skala.style.width = ""; // zurücksetzen
|
||||
|
||||
document.getElementById("formInput-1")?.classList.remove("2xl:mt-[370px]");
|
||||
return;
|
||||
}
|
||||
|
||||
let scroll = window.scrollY;
|
||||
if (scroll >= 400) {
|
||||
// Breite einmal auslesen und festsetzen
|
||||
const skalaWidth = skala.offsetWidth + "px";
|
||||
skala.style.width = skalaWidth;
|
||||
|
||||
skala.classList.add(
|
||||
"2xl:fixed",
|
||||
"2xl:py-4",
|
||||
"2xl:top-0",
|
||||
"2xl:z-20"
|
||||
);
|
||||
skala.classList.remove("w-full");
|
||||
skala.style.borderBottom = "3px solid #e6e6e6";
|
||||
|
||||
document.getElementById("formInput-1")?.classList.add("2xl:mt-[370px]");
|
||||
} else {
|
||||
skala.classList.remove(
|
||||
"2xl:fixed",
|
||||
"2xl:py-4",
|
||||
"2xl:top-0",
|
||||
"2xl:z-20"
|
||||
);
|
||||
skala.classList.add("w-full");
|
||||
skala.style.borderBottom = "none";
|
||||
skala.style.width = ""; // zurücksetzen
|
||||
|
||||
document.getElementById("formInput-1")?.classList.remove("2xl:mt-[370px]");
|
||||
}
|
||||
});
|
||||
|
||||
window.addEventListener("resize", () => {
|
||||
const skala = document.getElementById("skala");
|
||||
if (!skala) return;
|
||||
|
||||
// Nur aktualisieren, wenn gerade "fixed" ist
|
||||
if (skala.classList.contains("2xl:fixed")) {
|
||||
// Temporär zurücksetzen, um echte Breite zu bekommen
|
||||
skala.style.width = "";
|
||||
const skalaWidth = skala.offsetWidth + "px";
|
||||
skala.style.width = skalaWidth;
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<!DOCTYPE html>
|
||||
@@ -93,11 +141,11 @@ window.addEventListener("scroll", (event) => {
|
||||
|
||||
<Header {tabHover1} {tabHover2} {tabHover3} {tabHover4} {tabHover5} {tabHover6}/>
|
||||
|
||||
<main class="w-full p-0 grid grid-cols-1">
|
||||
<main class="w-full p-0 grid grid-cols-1 rounded-none">
|
||||
|
||||
<!--<SidebarLeft />-->
|
||||
|
||||
<article class="p-0 lg:p-2">
|
||||
<article class="p-0 lg:p-20">
|
||||
<slot />
|
||||
</article>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user