Пытаюсь заставить эти точки скользящего индикатора оставаться справа. ⇐ Javascript

[Anonymous]

Я работаю над проектом портфолио и пытаюсь сделать так, чтобы эти точки-индикаторы слайдов оставались в правой части экрана и в середине слайда. В настоящее время я исправил это, и я не хочу, чтобы оно отображалось на целевой странице, а только в разделе «О программе». Я пробовал обернуть родительский контейнер вокруг точек и раздела «О программе» фиксированным, но это ничего не дало. Абсолютный тоже не работает, поскольку vh равен 600vh и остается только в одном месте. Прикрепленный тоже не прилипает, пока вы не прокрутите его вниз, и продолжает прилипать после прокрутки после последнего слайда.
Вот раздел «Главная» и компонент «О программе»:

Код: Выделить всё

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


);
}

О компоненте:

Код: Выделить всё

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`}
/>




);
}

Вот что происходит, когда вы переходите к следующему слайду.


Он не остается в середине раздела «О программе», он исчезает за красным разделом. Я думаю, это потому, что у красного больше z-индекс.

Подробнее здесь: https://stackoverflow.com/questions/798 ... -the-right