ㅇㅇ

odada-o · Jun 12, 2024 · 599ff2b · 599ff2b
1 parent 73b1552
commit 599ff2b
Showing 1 changed file with 35 additions and 1 deletion.
diff --git a/05-js/scroll-gsap.html b/05-js/scroll-gsap.html
@@ -24,7 +24,7 @@
             #to-top {
                 position: fixed;
                 bottom: 30px;
-                right: 30px;
+                right: -130px;
                 width: 100px;
                 height: 100px;
                 background: blue;
@@ -63,6 +63,40 @@
                 background: lightcoral;
             }
         </style>
+        <script>
+            $(function () {
+                const headerEl = $('#header');
+                const toTopEl = $('#to-top');
+
+                $(window).on('scroll', function () {
+                    const scrollTop = $(window).scrollTop();
+                    // 만약 스크롤이 200px 이상이면
+                    // header를 없애고 toTop을 보이게
+                    // 그렇지 않으면 header를 보이게 하고 toTop을 없앤다.
+
+                    if (scrollTop > 200) {
+                        gsap.to(headerEl, {
+                            y: -100,
+                            duration: 0.5,
+                        });
+                        gsap.to(toTopEl, {
+                            x: 130,
+                            duration: 0.5,
+                        });
+                    } else {
+                        gsap.to(headerEl, {
+                            y: 0,
+                            duration: 0.5,
+                        });
+
+                        gsap.to(toTopEl, {
+                            x: -130,
+                            duration: 0.5,
+                        });
+                    }
+                });
+            });
+        </script>
     </head>
     <body>
         <div id="header">header</div>