Parallax effect between sections and Scrolling issue

Question

I am working on a landing page using react and tailwind. You have a sticky navigation where you click links then view scrolls to that particular section which connected to the link because section has that id. In between this you have two sections about and features where about has sticky top-0 class features also has sticky top-0 class to create a parallax style effect. When scroll down or up using any link in navbar it works well but when you click on about link if you are in the top of the page then page scrolls down smoothly to about section but when you are down further in other section like features and click about link again from the navbar the scroll doesn't take you to about section, rather it gets stuck and you have to click a lot of time so that about section finally reappears, this is happening because of position sticky. I tried many way like normal html css anchoring, or programmatic way of scrolling still doesn't work. I was wondering if someone can help me to solve this issue.

my navigation

import { cart, logo } from "@/assets/getAssets";
import { useScrollContext } from "@/contexts/ScrollContext";
import { useOutletContext } from "react-router-dom";
export default function Navbar() {
 const { hideTopNav } = useOutletContext<{ hideTopNav: boolean }>();
 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<HTMLAnchorElement>
 | React.MouseEvent<HTMLButtonElement, 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 (
 <div
 style={{ top: hideTopNav ? "0px" : "40px" }}
 className="fixed left-0 z-[9999] w-full py-6 backdrop-blur-md transition-all duration-300"
 >
 <nav className="max-w-[1200px] mx-auto flex justify-between items-center py-[6px]">
 <div>
 <img src={logo} alt="logo image" className="max-w-[169px] h-auto" />
 </div>
 {/* menus */}
 <ul className="px-[10px] py-[10px] flex gap-[64px] items-center">
 {menus.map((item) => (
 <li key={item.id}>
 <a
 className="font-manrope font-medium text-sm text-white leading-[19.6px] tracking-[-0.28px] no-underline"
 href={`#${item?.path}`}
 onClick={(e) => handleScroll(e, item?.path)}
 >
 {item?.title}
 </a>
 </li>
 ))}
 </ul>
 
 </nav>
 </div>
 );
}

example of about and feature section

export function About() {
 return (
 <section
 id="about"
 className="bg-green-500 p-10 py-[229px] mb-[128px] h-screen flex justify-center items-center sticky top-0 "
 >
 About
 </section>
 );
}
export function Features() {
 return (
 <section
 id="about"
 className="bg-yellow-500 p-10 py-[229px] mb-[128px] h-screen flex justify-center items-center sticky top-0"
 >
 Features
 </section>
 );
}

I tried normal way of html and css for scrolling in sections, even used programmatic way, using ref with global context to remove the sticky class, but since react re-renders when states change so sticky doesn't go on the very first time, then have to click again then it will work so having a context with states didn't helped also

• natashap: Can you please try to reproduce this in codesandbox and share the link here?
• Ayan Upadhaya: codesandbox.io/p/sandbox/3tk4zh check scrolling behave when click on links from top to bottom and bottom to top
• natashap: Hi, do you want to use the parallax effect in the application only for that particular section?
• Ayan Upadhaya: Yes, the problem is sticky sections can overlap one another when scroll down, but when we click links in the dynamic navigation it doesn't scroll up well