0

I'm building a navbar who changes its background color if the user has scrolled until an ad. Before, I used the method "window.scrollY" and change the color if its number is over 700. Unfortunatly this method is bad to be responsive with differents screens.

In my navabr when I click on a title, the website automaticaly scroll until the part.

I used references to do it and I would like to know if you know a way to check if the scroll reached a reference in the top of the screen (to replace the bad color system).

Like ref.current.isReached ? return a boolean. With that I could change my css in a better way.

I hope I was clear, my english is very bad.

This is my classe with the ref system:

const Home = ({ section }: Props) => {

    const sectionRef1: any = useRef(React.createRef());
    const sectionRef2: any = useRef(React.createRef());

    const scroll = (ref: any) => {
        ref.current.scrollIntoView({
            behavior: 'smooth',
            block: 'start',
        });
    };

    function scrollToSection(section: number) {
        if (section === 1) {
            scroll(sectionRef1);
        }
        else if (section === 2) {
            scroll(sectionRef2);
        }
        else if (section === 3) {
            //TODO: active button
        }
    }

    useEffect(() => {
        scrollToSection(section);
    }, [section]);

    return (
        <div>
            <div ref={sectionRef1} />
            <Carrousel></Carrousel>
            <div ref={sectionRef2} className="margin_top_portrait" />
            <Portrait></Portrait>
        </div>
    );
}
export default Home;

Thanks in advance

Malaury Boudon
  • 656
  • 1
  • 8
  • 18

1 Answers1

0
useEffect(() => {
        window.addEventListener('scroll', onScroll);
        return () => {
            window.removeEventListener('scroll', onScroll);
        };
    }, []);

In onScroll function you can find out whatever your want about your element position with ref.current.getBoundingClientRect()

Example of checking if element is in viewport

Kostya Tresko
  • 754
  • 1
  • 5
  • 24