How to navigation background color change on scroll

**# I want to navigation background color change when story data scroll. When our story data scroll 1 to 100% together nav story background color changes 1 to 100%. I was trying to scroll progress used but I could not solve it. I can’t understand how should solve please, anyone, help As like https://maat-law-firm.webflow.io/story **

import React, { useEffect, useState } from 'react';
import { Col, Container, Image, Row } from 'react-bootstrap';
import './OurStory.css';
      
const OurStory = () => {
     const [story, setStory] = useState([]);
     useEffect(() => {
         fetch('https://pure-refuge-33072.herokuapp.com/story')
            .then(res => res.json())
            .then(data => setStory(data))
     }, []);
return (
   <div className="pb-5">
     <div className="ourStory">
        <Container>
              <div id='ourStory' className='mainSection'>
                  {
                    story.map((story, index) => <div key={story?._id}>
                      <div id={story?._id} className='py-5'>
                          <Row>
                             <Col xs={12} lg={6}>
                                <div className="big-font singleStory">
                                   <h3 className='storyAbout'>{story?.about}</h3>
                                    <h1>{story?.title}</h1>
                                 </div>
                               </Col>
                               <Col xs={12} lg={6}>
                                 <div>
                                    <div className="big-font singleStory">
                                       <h2>{story?.sub_title}</h2>
                                        <p>{story?.description}</p>
                                        <Image className='w-100' src={story?.image} />
                                     </div>
                                 </div>
                               </Col>
                             </Row>
                         </div>
                         <div className='mt-5 pt-5'>
                            <hr className='bg-white' />
                          </div>
                      </div>)
                   }
                </div>
            </Container>
            <div className='navStoryContainer'>
               <Container >
                  <Row className='navStory'>
                     {
                        story.map((story, index) => <div
                           className='navStoryItem'
                            key={story?._id}>
                         <a href={`#${story?._id}`}>
                           <div className='big-font'>
                               <h5>{story?.about}</h5>
                               <p>{story?.title}</p>
                            </div>
                         </a>
                      </div>)
                    }
                 </Row>
              </Container>
           </div>
        </div>
    </div >
   );
 };      
export default OurStory;