Эффект параллакса между разделами и проблема с прокруткой ⇐ Javascript

[Anonymous]

Я работаю над целевой страницей, используя React и Tailwind. У вас есть липкая навигация, в которой вы нажимаете на ссылки, а затем просматриваете тот конкретный раздел, который связан со ссылкой, потому что раздел имеет этот идентификатор. Между этим у вас есть два раздела о функциях, где о есть липкие функции класса Top-0, а также есть липкий класс Top-0 для создания эффекта стиля параллакса. При прокрутке вниз или вверх с использованием любой ссылки на панели навигации это работает хорошо, но когда вы нажимаете ссылку «О программе», если вы находитесь в верхней части страницы, страница плавно прокручивается вниз до раздела «О программе», но когда вы опускаетесь дальше в другом разделе, например «Функции», и снова нажимаете ссылку «О ссылке» на панели навигации, прокрутка не приводит вас к разделу «О программе», а скорее застревает, и вам приходится нажимать много времени, чтобы раздел «О программе», наконец, появился снова, это происходит из-за закрепления позиции. Я пробовал много способов, например, обычную привязку HTML CSS или программный способ прокрутки, все еще не работает. Мне было интересно, может ли кто-нибудь помочь мне решить эту проблему.
моя навигация

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

import { cart, logo } from "@/assets/getAssets";
import { useScrollContext } from "@/contexts/ScrollContext";
import { useOutletContext } from "react-router-dom";

export default function Navbar() {
const { hideTopNav } = useOutletContext();
const { setClickedSection } = useScrollContext();
const menus = [
{
id: 1,
title: "About",
path: "about",
},
{
id: 2,
title: "Features",
path: "features",
},
{
id: 3,
title: "FAQs",
path: "faqs",
},
{
id: 4,
title: "Contact",
path: "contact",
},
];

const handleScroll = (
e:
| React.MouseEvent
| React.MouseEvent,
targetId?: string
) => {
e.preventDefault();

if (!targetId || targetId === "#") {
// Scroll to top if no id provided
window.scrollTo({ top: 0, behavior: "smooth" });
return;
}

const section = document.getElementById(targetId);
setClickedSection(targetId);
if (section) {
const yOffset = -10; // adjust based on header height
const y =
section.getBoundingClientRect().top + window.pageYOffset + yOffset;
window.scrollTo({ top: y, behavior: "smooth" });
}
};

return (
style={{ top: hideTopNav ? "0px" : "40px" }}
className="fixed left-0 z-[9999] w-full py-6 backdrop-blur-md transition-all duration-300"
>


[img]{logo} alt=[/img]

{/* menus */}
[list]
{menus.map((item) => (
[*]
[url={`#${item?.path}`}
onClick={(e) =] handleScroll(e, item?.path)}
>
{item?.title}
[/url]

))}
[/list]



);
}

пример раздела «О программе» и функциях

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

export  function About() {
return (

About

);
}
export function Features() {
return (

Features

);
}

Я пробовал обычный способ html и css для прокрутки разделов, даже использовал программный способ, используя ref с глобальным контекстом для удаления липкого класса, но поскольку реакция выполняет повторный рендеринг при изменении состояний, настолько липкий не происходит в первый раз, тогда приходится щелкать еще раз, тогда это будет работать, поэтому наличие контекста с состояниями также не помогло


Подробнее здесь: https://stackoverflow.com/questions/797 ... ling-issue