Breaking News: Grepper is joining You.com. Read the official announcement!

scrollspy with reactjs

mohamad salimi answered on September 2, 2023 Popularity 8/10 Helpfulness 1/10

answer scrollspy with reactjs

scrollspy with reactjs

Comment

import React, { useEffect, useState, useRef } from "react";
import { Link } from "react-router-dom";
import Logo from "../../assets/logo.png";
import { faChevronDown } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

import "./navbar.css";

export const NavBar = () => {
  const [isActive, setIsActive] = useState(false);
  const [isOpenSub, setIsOpenSub] = useState(false);
  const [isScrolled, setIsScrolled] = useState(false);
  const [activeLink, setActiveLink] = useState("home");

  const toggleMobileMenu = () => {
    setIsActive(!isActive);
  };

  const toggleSubMenu = () => {
    setIsOpenSub(!isOpenSub);
  };

  useEffect(() => {
    const handleScroll = () => {
      if (window.scrollY > 300) {
        setIsScrolled(true);
      } else {
        setIsScrolled(false);
      }

      // Call the function to determine the active section while scrolling
      determineActiveSection();
    };

    window.addEventListener("scroll", handleScroll);

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

  // Smooth scroll to section
  const scrollToSection = (sectionId) => {
    const element = document.getElementById(sectionId);
    if (element) {
      const marginTop = 120; // Adjust this value as needed
      const scrollToY =
        element.getBoundingClientRect().top + window.scrollY - marginTop;
      window.scrollTo({ top: scrollToY, behavior: "smooth" });
    }
  };

  // Function to determine the active section while scrolling
  const determineActiveSection = () => {
    const sections = ["hero", "services", "aboutus", "testimonial"];

    for (let i = sections.length - 1; i >= 0; i--) {
      const section = document.getElementById(sections[i]);
      if (section) {
        const rect = section.getBoundingClientRect();
        if (rect.top <= 120 && rect.bottom >= 120) {
          setActiveLink(sections[i]);
          break;
        }
      }
    }
  };

  return (
    <header className={`header ${isScrolled ? "scrolled" : ""}`}>
      <div className="container">
        <div className="row">
          <Link to="/" className="logo-link">
            <img src={Logo} alt="logo" className="logo-image" />
          </Link>
          <div
            className={`toggle-btn ${isActive ? "active" : ""}`}
            id="toggleBtn"
            onClick={toggleMobileMenu}
          >
            <span></span>
          </div>
          <ul className={`menu-bar ${isActive ? "active" : ""}`} id="menuBar">
            <li>
              <Link
                to="/"
                className={`link ${activeLink === "home" ? "active" : ""}`}
                onClick={() => scrollToSection("hero")}
              >
                home
              </Link>
            </li>
            <li>
              <Link
                to="/"
                className={`link ${activeLink === "services" ? "active" : ""}`}
                onClick={() => scrollToSection("services")}
              >
                services
              </Link>
            </li>
            <li>
              <Link
                to="/"
                className={`link ${activeLink === "aboutus" ? "active" : ""}`}
                onClick={() => scrollToSection("aboutus")}
              >
                about
              </Link>
            </li>
            <li
              className={`${isOpenSub ? "active" : ""}`}
              onClick={toggleSubMenu}
            >
              <Link to="#" className="link">
                pages
              </Link>
              <ul className="sub-menu">
                <li>
                  <Link to="#" className="sub-link">
                    about us
                  </Link>
                </li>
                <li>
                  <Link to="#" className="sub-link">
                    our services
                  </Link>
                </li>
                <li>
                  <Link to="#" className="sub-link">
                    contact us
                  </Link>
                </li>
              </ul>
              <FontAwesomeIcon icon={faChevronDown} className="chevron-down" />
            </li>
            <li>
              <Link
                to="/"
                className={`link ${
                  activeLink === "testimonial" ? "active" : ""
                }`}
                onClick={() => scrollToSection("testimonial")}
              >
                testimonials
              </Link>
            </li>
          </ul>
        </div>
      </div>
    </header>
  );
};

Popularity 8/10 Helpfulness 1/10 Language whatever

Source: chat.openai.com

Tags: reactjs scrollspy whatever

Link to this answer
Share Copy Link

Contributed on Sep 02 2023

mohamad salimi

0 Answers Avg Quality 2/10

scrollspy with reactjs

Contents

More Related Answers

scrollspy with reactjs

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.