I have a NextJs component Slider
which is responsible for the fact that when scrolling, the lower section “runs over” the upper section and overlaps it. Here is code:
"use client"
import { useEffect, useState } from 'react';
import UploadSlider from "./UploadSlider";
import RecommendedCandiates from './RecommendedCandiates';
import WorkWithAI from './WorkWithAI';
import UseSupport from './UseSupport';
import FreeVacancy from './FreeVacancy';
const sections = [
<UploadSlider key="upload-slider" />,
<RecommendedCandiates key="recommended-candidates" />,
<WorkWithAI key="work-with-ai" />,
<UseSupport key="use-support" />,
<FreeVacancy key="free-vacancy" />
];
const Slider = () => {
const [currentSection, setCurrentSection] = useState(0);
const [hasStartedSliding, setHasStartedSliding] = useState(false);
const startedSlidingHandler = (scrollPosition, triggerHeight) => {
const sectionHeight = window.innerHeight;
const newSection = Math.min(
sections.length - 1,
Math.floor((scrollPosition - triggerHeight / 2.3) / sectionHeight)
);
if (newSection !== currentSection) {
setCurrentSection(newSection);
}
}
const handleScroll = () => {
const scrollPosition = window.scrollY;
const triggerHeight = document.getElementById('sliding-sections').offsetTop;
if (scrollPosition >= triggerHeight && !hasStartedSliding) {
setHasStartedSliding(true);
}
if (hasStartedSliding) {
startedSlidingHandler(scrollPosition, triggerHeight);
}
};
useEffect(() => {
window.addEventListener('scroll', handleScroll);
return () => window.removeEventListener('scroll', handleScroll);
}, [currentSection, hasStartedSliding]);
return (
<>
<div id="sliding-sections" className="relative">
<div style={{height: `${sections.length * 100}vh `}}>
<div className="min-h-screen">
{sections[0]}
</div>
</div>
{sections.slice(1).map((section, index) => (
<div
key={index + 1}
className={`fixed top-0 w-full h-full transition-transform duration-1000 ease-in-out transform ${
hasStartedSliding && currentSection >= index + 1 ? 'translate-y-0' : 'translate-y-full'
}`}
>
{section}
</div>
))}
</div>
</>
);
};
export default Slider;
But the problem I have is that when I place another section under this component on the same page, it is not visible because the slider covers its content.
As far as I understand, this is due to the fact that I define fixed top-0
for the sections in the slider.
Here is page.js code
import EmployerHeader from "@/components/employer/EmployerHeader";
import MainSection from "@/components/employer/MainSection";
import ResumeBase from "@/components/employer/ResumeBase";
import Slider from "@/components/employer/sliders/Slider";
import Reviews from "@/components/employer/Reviews";
export default function Home() {
return(
<div className="w-full">
<EmployerHeader />
<MainSection />
<ResumeBase />
<Slider />
<Reviews />
</div>
)
}
In my case the Reviews
section hides under the Slider
component
If I change fixed
to absolute
, scrolling stops working for me. How can I fix this?