From c6457b754264288106497e8d2b9740255b8367e5 Mon Sep 17 00:00:00 2001 From: Luke Cheng Date: Sun, 4 Feb 2024 00:30:30 -0500 Subject: [PATCH] fixed scrolling behavior --- frontend/src/App.js | 83 ++++++++++++++---------- frontend/src/components/ChatAssistant.js | 2 + frontend/src/components/Content.js | 5 +- frontend/src/components/Footer.js | 4 ++ frontend/src/components/NavBar.js | 17 +++-- 5 files changed, 66 insertions(+), 45 deletions(-) create mode 100644 frontend/src/components/Footer.js diff --git a/frontend/src/App.js b/frontend/src/App.js index 0d1917d..44b57ab 100644 --- a/frontend/src/App.js +++ b/frontend/src/App.js @@ -1,11 +1,12 @@ -import React, { useEffect } from "react"; +import React, {useEffect} from "react"; import useMediaQuery from "@mui/material/useMediaQuery"; -import { createTheme, ThemeProvider } from "@mui/material/styles"; +import {createTheme, ThemeProvider} from "@mui/material/styles"; import CssBaseline from "@mui/material/CssBaseline"; import GreetingMsg from "./components/GreetingMsg"; import NavBar from "./components/NavBar"; import Grid from "@mui/material/Grid"; import Content from "./components/Content"; +import Footer from "./components/Footer"; import AppBar from "@mui/material/AppBar"; function App() { @@ -26,60 +27,74 @@ function App() { const [showGreetingMsg, setShowGreetingMsg] = React.useState(true); useEffect(() => { - function handleScroll() { - const nav = document.getElementById("navbar"); - - if (nav?.getBoundingClientRect().top <= 0) { - setShowGreetingMsg(false); + const observer = new IntersectionObserver( + (entries) => { + entries.forEach((entry) => { + // If greeting message is not intersecting (visible) in the viewport, hide it + if (!entry.isIntersecting) { + setShowGreetingMsg(false); + } + }); + }, + { + rootMargin: "0px", + threshold: 0.1, // Adjust threshold to control when the callback is executed } + ); + + const greetingMsgElement = document.getElementById("greeting-msg"); + if (greetingMsgElement) { + observer.observe(greetingMsgElement); } - window.addEventListener("scroll", handleScroll); - return () => window.removeEventListener("scroll", handleScroll); + return () => { + if (greetingMsgElement) { + observer.unobserve(greetingMsgElement); + } + }; }, []); // navbar & content sync - const [section, setSection] = React.useState(0); + const [section, setSection] = React.useState(1); - function changeSection(event, newSection) { - // scroll thus the top the nav bar line up with the top of the screen - const navbar = document.getElementById("navbar"); - window.scrollTo({ - top: navbar.getBoundingClientRect().top + window.scrollY, - behavior: "smooth", - }); + function scrollDown() { + // scroll sown until the greeting message out of the view + const topNavBar = document + .getElementById("nav") + ?.getBoundingClientRect().top; + window.scroll({top: topNavBar + window.scrollY, behavior: "smooth"}); + } - // change section on click + function changeSection(event, newSection) { + scrollDown(); setSection(newSection); } return ( - - {showGreetingMsg && ( + {showGreetingMsg ? ( + - )} - {/* todo evaluate the bar when scrolling https://mui.com/material-ui/react-app-bar/#back-to-top*/} - - - + + + + + ) : ( + + - - - + )} + +