rythondev/RythonDev
1
0
Fork 0
mirror of https://github.com/liyunze-coding/RythonDev.git synced 2026-09-22 07:44:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

use scroll position instead of scroll progress for consistency

Browse source
This commit is contained in:
liyunze 2025-08-25 11:25:44 +10:00
parent 5b6933994b
commit b7d8c41884
2 changed files with 15 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/components/ui/NavigationBar.tsx
View file

@ -49,7 +49,7 @@ export const HoverNavigation = ({
className?: string; className?: string;
}) => { }) => {
const [hoveredIndex, setHoveredIndex] = useState<number | null>(null); const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
const { scrollYProgress } = useScroll(); const { scrollY } = useScroll();
const [navVisible, setNavVisible] = useState(true); const [navVisible, setNavVisible] = useState(true);
const [availableVisible, setAvailableVisible] = useState(false); const [availableVisible, setAvailableVisible] = useState(false);
@ -68,13 +68,13 @@ export const HoverNavigation = ({
const updateNavBarState = ( const updateNavBarState = (
width: number, width: number,
scrollProgress: number = 0, scrollPosition: number = 0,
scrollUp: boolean = false, scrollUp: boolean = false,
) => { ) => {
if (width && width < 1024) { if (width && width < 1024) {
setNavVisible(false); setNavVisible(false);
setAvailableVisible(true); setAvailableVisible(true);
} else if (scrollProgress < 0.05) { } else if (scrollPosition < 50) {
setNavVisible(true); setNavVisible(true);
setAvailableVisible(false); setAvailableVisible(false);
} else if (!onContactPage) { } else if (!onContactPage) {
@ -86,12 +86,12 @@ export const HoverNavigation = ({
} }
}; };
useMotionValueEvent(scrollYProgress, "change", (current) => { useMotionValueEvent(scrollY, "change", (current) => {
// Check if current is not undefined and is a number // Check if current is not undefined and is a number
if (typeof current === "number") { if (typeof current === "number") {
let direction = current! - scrollYProgress.getPrevious()!; let direction = current! - scrollY.getPrevious()!;
let scrollUp = direction <= 0; let scrollUp = direction <= 0;
let scrollProgress = scrollYProgress.get(); let scrollProgress = scrollY.get();
updateNavBarState(width, scrollProgress, scrollUp); updateNavBarState(width, scrollProgress, scrollUp);
} }

18
tsconfig.json
View file

@ -1,11 +1,11 @@
{ {
"extends": "astro/tsconfigs/strict", "extends": "astro/tsconfigs/strict",
"compilerOptions": { "compilerOptions": {
"jsx": "react-jsx", "jsx": "react-jsx",
"jsxImportSource": "react", "jsxImportSource": "react",
"baseUrl": "./", "baseUrl": "./",
"paths": { "paths": {
"@/*": ["src/*"] "@/*": ["src/*"]
} }
} }
} }