diff --git a/src/common/hooks/useScrollPosition.tsx b/src/common/hooks/useScrollPosition.tsx
new file mode 100644
index 00000000..31b5756d
--- /dev/null
+++ b/src/common/hooks/useScrollPosition.tsx
@@ -0,0 +1,31 @@
+import { useEffect, useRef, useState } from 'react';
+
+const useScrollPosition = (topYScrollPosition: number = 20) => {
+  const lastScrollPositionRef = useRef(0);
+  const [isScrollingDown, setIsScrollingDown] = useState(true);
+  const [isScrollTop, setIsScrollTop] = useState(true);
+
+  useEffect(() => {
+    const scrollHandler = () => {
+      const currentScrollPosition = window.scrollY;
+
+      setIsScrollTop(currentScrollPosition < topYScrollPosition);
+      setIsScrollingDown(lastScrollPositionRef.current < currentScrollPosition);
+
+      lastScrollPositionRef.current = currentScrollPosition;
+    };
+
+    window.addEventListener('scroll', scrollHandler);
+
+    return () => {
+      window.removeEventListener('scroll', scrollHandler);
+    };
+  }, [topYScrollPosition]);
+
+  return {
+    isScrollingDown,
+    isScrollTop,
+  };
+};
+
+export default useScrollPosition;
diff --git a/src/views/ApplyPage/components/ApplyCategory/index.tsx b/src/views/ApplyPage/components/ApplyCategory/index.tsx
index cdcebcbd..20f081c5 100644
--- a/src/views/ApplyPage/components/ApplyCategory/index.tsx
+++ b/src/views/ApplyPage/components/ApplyCategory/index.tsx
@@ -1,6 +1,8 @@
 import { memo } from 'react';
 import { Link } from 'react-router-dom';
 
+import useScrollPosition from '@hooks/useScrollPosition';
+
 import { CATEGORY } from './constant';
 import { activeLinkStyle, categoryLinkStyle, categoryList, container } from './style.css';
 
@@ -8,8 +10,10 @@ interface ApplyCategoryProps {
   minIndex: number;
 }
 const ApplyCategory = memo(({ minIndex }: ApplyCategoryProps) => {
+  const { isScrollingDown, isScrollTop } = useScrollPosition(950);
+
   return (
-    <nav className={container}>
+    <nav className={container[minIndex !== -1 && isScrollingDown && !isScrollTop ? 'scrollDown' : 'scrollUp']}>
       <ul className={categoryList}>
         {CATEGORY.map(({ index, text, path }) => (
           <li key={path}>
diff --git a/src/views/ApplyPage/components/ApplyCategory/style.css.ts b/src/views/ApplyPage/components/ApplyCategory/style.css.ts
index ee0239a3..2e1776b1 100644
--- a/src/views/ApplyPage/components/ApplyCategory/style.css.ts
+++ b/src/views/ApplyPage/components/ApplyCategory/style.css.ts
@@ -1,9 +1,9 @@
-import { style } from '@vanilla-extract/css';
+import { style, styleVariants } from '@vanilla-extract/css';
 
 import { Z_INDEX } from '@constants/zIndex';
 import { theme } from 'styles/theme.css';
 
-export const container = style({
+export const containerBase = style({
   display: 'flex',
   justifyContent: 'center',
   width: 1440,
@@ -14,6 +14,23 @@ export const container = style({
 
   backgroundColor: theme.color.white,
   zIndex: Z_INDEX.applyCategory,
+  transition: 'all 0.5s ease',
+});
+
+export const container = styleVariants({
+  scrollUp: [
+    containerBase,
+    {
+      opacity: 1,
+    },
+  ],
+  scrollDown: [
+    containerBase,
+    {
+      opacity: 0,
+      transform: 'translateY(-41px)',
+    },
+  ],
 });
 
 export const categoryList = style({
diff --git a/src/views/ApplyPage/components/CommonSection/style.css.ts b/src/views/ApplyPage/components/CommonSection/style.css.ts
index 5a7d6e71..3ef138db 100644
--- a/src/views/ApplyPage/components/CommonSection/style.css.ts
+++ b/src/views/ApplyPage/components/CommonSection/style.css.ts
@@ -6,7 +6,7 @@ export const sectionContainer = style({
   display: 'flex',
   flexDirection: 'column',
   gap: 50,
-  paddingTop: 90,
+  paddingTop: 40,
 });
 
 export const title = style({
diff --git a/src/views/ApplyPage/components/PartSection/style.css.ts b/src/views/ApplyPage/components/PartSection/style.css.ts
index 5a7d6e71..3ef138db 100644
--- a/src/views/ApplyPage/components/PartSection/style.css.ts
+++ b/src/views/ApplyPage/components/PartSection/style.css.ts
@@ -6,7 +6,7 @@ export const sectionContainer = style({
   display: 'flex',
   flexDirection: 'column',
   gap: 50,
-  paddingTop: 90,
+  paddingTop: 40,
 });
 
 export const title = style({
diff --git a/src/views/ApplyPage/style.css.ts b/src/views/ApplyPage/style.css.ts
index 9754bca3..1c9e9c83 100644
--- a/src/views/ApplyPage/style.css.ts
+++ b/src/views/ApplyPage/style.css.ts
@@ -11,7 +11,7 @@ export const container = style({
 export const formContainer = style({
   display: 'flex',
   flexDirection: 'column',
-  gap: 50,
+  gap: 100,
 
   marginBottom: 362,
   width: 720,