react - stop scrolling when reaching specific section

Current UI:

When I want to do is, when the scroll arrives to the red section, the percentage will start increasing
User cannot continue to scroll down until the percentage increases to 100%.

Example: https://circleci.com/#advantage-flexibility

How to do it?

App.js

import "./styles.css";
import { useScrollPercentage } from "react-scroll-percentage";

export default function App() {
  const [ref, percentage] = useScrollPercentage({
    /* Optional options */
    threshold: 0
  });
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>{" "}
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <div ref={ref} style=>
        <h1>
          When the scroll arrive this div, the position of this div will become
          sticky, and the percentage will start to increase from 0 to 100. When
          arriving 100%, user can then scroll to next section
        </h1>
        <h2>{`Percentage scrolled: ${percentage.toPrecision(2)}%.`}</h2>
      </div>
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

Codesnadbox:
https://codesandbox.io/s/divine-bird-9fy50?file=/src/App.js:0-1365

from react - stop scrolling when reaching specific section