On scroll nav sticks to the top 0 and doesn't come to its original position

Question

I'm currently working on implementing the active functionality for tabs using react-scroll. Here's how it will work:

I will import this functionality into the Campaign page. When the user scrolls and the window reaches the top (position 0), the navbar will be fixed. If the user scrolls down, the navbar will return to its original position.Wanted to fix it.

I'm facing another issue where the first list item gets activated when I reach the bottom of element 1. However, I want it to be active by default when a specific element is in view.

I've made several attempts to fix the issue, but I haven't been able to figure out how to achieve the desired functionality and resolve it.

With the below code, the navbar gets fixed when i start scroll from top. Tt should be stick when the navbar reaches the top 0 and get back to its original position on scroll down.

Here is the reference of tabs functionality: https://campaigns.givebrite.com/water-is-life-dhul-hijjah-2023

const ScrollableContent = () => {
  const [isNavbarFixed, setIsNavbarFixed] = useState(false);
  const [isAtTop, setIsAtTop] = useState(true);
  const navRef = useRef(null);
  const scrollableRef = useRef(null);
  const originalNavOffset = useRef(0);

  useEffect(() => {
    const handleScroll = () => {
      const scrollableElement = scrollableRef.current;
      const navElement = navRef.current;
      const scrollableRect = scrollableElement.getBoundingClientRect();
      const navRect = navElement.getBoundingClientRect();
      setIsNavbarFixed(navRect.top <= scrollableRect.top);
      setIsAtTop(window.pageYOffset === 0);
    };

    const saveOriginalNavOffset = () => {
      const navElement = navRef.current;
      const navRect = navElement.getBoundingClientRect();
      originalNavOffset.current = navRect.top;
    };

    window.addEventListener("scroll", handleScroll);
    window.addEventListener("resize", saveOriginalNavOffset);

    saveOriginalNavOffset(); // Save the original position of the navbar

    return () => {
      window.removeEventListener("scroll", handleScroll);
      window.removeEventListener("resize", saveOriginalNavOffset);
    };
  }, []);


  const getNavStyles = () => {
    // if (isNavbarFixed && !isAtTop) {
    if (!isAtTop) {
      return {
        position: "fixed",
        top: 0,
        left: 0,
        right: 0,
        zIndex: 999,
      };
    }
    return {
      position: "relative",
    };
  };

  return (
    <div>
      <nav ref={navRef} className="navbar" style={getNavStyles()}>
        <div className="container-fluid">
          <div
            className="collapse navbar-collapse"
            id="bs-example-navbar-collapse-1"
          >
            <ul className="nav navbar-nav">
              <li>
                <Link
                  activeClass="active"
                  className="test1"
                  to="test1"
                  spy={true}
                  smooth={true}
                  duration={500}
                  offset={50}
                >
                  Campaign
                </Link>
              </li>
              <li>
                <Link
                  activeClass="active"
                  className="test2"
                  to="test2"
                  spy={true}
                  smooth={true}
                  duration={500}
                  offset={-55}
                >
                  Giving Amounts
                </Link>
              </li>
              <li>
                <Link
                  activeClass="active"
                  className="test3"
                  to="test3"
                  spy={true}
                  smooth={true}
                  duration={500}
                >
                  Updates (1)
                </Link>
              </li>
              <li>
                <Link
                  activeClass="active"
                  className="test4"
                  to="test4"
                  spy={true}
                  smooth={true}
                  duration={500}
                >
                  Supporters
                </Link>
              </li>
            </ul>
          </div>
        </div>
      </nav>

      <div ref={scrollableRef}  >
        <Element name="test1" className="element">
          test 1
        </Element>

        <Element name="test2" className="element no-padding">
          test 2
        </Element>

        <Element name="test3" className="element">
          test 3
        </Element>

        <Element name="test4" className="element">
          test 4
        </Element>

      </div>
    </div>
  );
};

export default ScrollableContent;