Ich versuche, diese Schiebeanzeigepunkte auf der rechten Seite zu halten ⇐ JavaScript

[Anonymous]

Ich arbeite an einem Portfolio-Projekt und versuche, diese Folienindikatorpunkte auf der rechten Seite des Bildschirms und in der Mitte der Folie zu platzieren. Ich habe es derzeit auf „Fixed“ eingestellt und möchte nicht, dass es auf der Landingpage, sondern nur im Abschnitt „Info“ angezeigt wird. Ich habe versucht, einen übergeordneten Container mit „Fixed“ um die Punkte und den „About“-Abschnitt zu wickeln, aber das hat nichts gebracht. Absolut funktioniert auch nicht, da die VH 600 VH beträgt und nur an einer Stelle bleibt. Sticky funktioniert auch nicht, da es nicht bleibt, bis Sie nach unten scrollen, und es bleibt bestehen, sobald Sie nach der letzten Folie scrollen.
Hier ist der Abschnitt „Startseite“ und die Komponente „Info“:

Code: Select all

import { useEffect, useRef, useState } from "react";
import AlternatingText from "../../components/home/AlternatingText";
import AboutSection from "../../components/home/AboutSection";

export default function Home() {
const secondPageRef = useRef(null);

const scroll = () => {
if (secondPageRef.current) {
secondPageRef.current.scrollIntoView({
behavior: "smooth",
block: "start",
});
}
};

const [currentSlide, setCurrentSlide] = useState(0);
const totalSlides = 3;

useEffect(() => {
const elements = document.querySelectorAll(".about-section");

const observer = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
const index = Number(entry.target.getAttribute("data-slidenumber"));
setCurrentSlide(index);
entry.target.classList.add("translate-x-0", "opacity-100");
entry.target.classList.remove("-translate-x-20", "opacity-0");
} else {
entry.target.classList.add("-translate-x-20", "opacity-0");
entry.target.classList.remove("translate-x-0", "opacity-100");
}
});
},
{ threshold: 0.4 }
);
elements.forEach((element) => observer.observe(element));

return () => {
elements.forEach((element) => observer.unobserve(element));
};
}, []);

return (

{/*------------*/}
{/*Landing section*/}
{/*------------*/}

{/*Semi circle shape*/}


{/*Grid container*/}

{/*Left grid column with main text and alternating text*/}


Japanese Master


Learn Japanese to:{" "}

{/*  */}

{/*Middle grid column with vertical Japanese text*/}


日本語マスター


{/*Right grid column with Japanese image*/}

[img]/images/home/geisha.jpg[/img]
              alt="Japanese Calligraphy"
/>



{/*Get started button*/}

Get Started! 


{/*See more button*/}

See more . . .  
[img]/icons/arrow.png[/img]
              className="ml-2 max-w-6 max-h-6 invert-100">


{/*Japanese scroll*/}



あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわおんアイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワオン



あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわおんアイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワオン





{/*Course selection*/}

{Array.from({ length: 3 }).map((_, index) =>  (

))}



{/*Games selection*/}


{/*Kanji selection*/}


Next slide


);
}

Über die Komponente:

Code: Select all

import { RefObject } from "react";

type PropsType = {
ref?: RefObject;
brushColour: string;
title: string;
paragraphs: string[];
middleImage: string;
slidenumber: number;
};

export default function AboutSection(props: PropsType) {
return (

{/*------------*/}
{/*About section*/}
{/*------------*/}
ref={props.ref}
data-slidenumber={props.slidenumber}
className={`h-[200vh] sticky top-0 overflow-hidden font-intervariable font-extrabold bg-white`}>

{/*Brush*/}


[img]{`/images/home/${props.brushColour}`}
/>

{/*Course text and paragraphs*/}



{props.title}

{props.paragraphs.map((value, index) => (

{value}

))}

{/*Middle image*/}
[img]{`/images/home/${props.middleImage}`}
props.middleImage == "samurai.png" ? "pl-7"  : ""
} z-10`}
/>




);
}

Das passiert, wenn Sie zur nächsten Folie wechseln.


Es bleibt nicht in der Mitte des About-Abschnitts, sondern verschwindet hinter dem roten Abschnitt. Ich glaube, das liegt daran, dass Rot einen größeren Z-Index hat.