Как сделать раздел прикрепленным со ссылками ⇐ CSS

[Anonymous]

Я немного поэкспериментировал с React-Intersection-Observer, но я новичок в этом деле и, похоже, не понимаю, как сделать привязку плавной на мобильных устройствах.
У меня есть прикрепленный раздел, содержащий пару ссылок, и на рабочем столе при наведении на ссылку отображается изображение. К сожалению, наведение не очень хорошо работает на мобильных устройствах, поэтому я стремлюсь к следующему:
Когда пользователь входит в прикрепленный раздел, раздел со ссылками должен прилипать и располагаться по центру области просмотра. для пользователя. Когда пользователь прокручивает ссылки, каждая ссылка будет видна с помощью React-Intersection-Observer и будет выделена жирным шрифтом, чтобы пользователь знал, что она активна, а также будет показано изображение.
Моя проблема в том, что раздел не держится очень долго, поэтому ссылки при прокрутке перемещаются, и это выглядит немного странно для пользователя. Когда пользователь прокрутил до последней ссылки, он должен был дойти до конца липкого контейнера и перейти к следующему разделу, но до тех пор она должна прилипать, а ссылки должны быть центрированы, как уже упоминалось.< /p>
Как я могу заставить раздел сохраняться дольше и не перемещать ссылки, но при этом сделать их активными с помощью React-Intersection-Observer? Или это возможно?

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

const StickyWrapper = styled("div")`
position: sticky;
top: 0;
height: calc(100vh - 80px);
background: lightblue;
width: 100%;
border: 1px solid red;

${above["mobile.lg"]} {
height: 80vh;
}
`;

const LinksLayer = styled("div")`
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

display: flex;
flex-direction: column;
`;

const MobileView = ({ navigationData, heading }: Props) => {
const [activeId, setActiveId] = useState(navigationData[0].label);

return (



{navigationData?.map(({ id, src, label }, index) => {
if (!src) return null;
return (

);
})}



);
};

export default MobileView;

const LinkItem = ({ id, src, label, setActiveId, isActive }: Props) => {
if (!src) return null;

const [ref, inView] = useInView({
threshold: [0],
rootMargin: "-50% 0% -50% 0%",
});

useEffect(() => {
if (inView && !isActive) {
setActiveId(id);
}
}, [inView]);

const nonActiveOpacity = 0.3;

return (



{label}



);
};

export default LinkItem;

Я пробовал экспериментировать с высотой липкой обертки, добавлять наполнители или триггеры в липкий раздел.

Подробнее здесь: https://stackoverflow.com/questions/786 ... n-observer