header css

odada-o · Jun 12, 2024 · 73b1552 · 73b1552
1 parent 65c30a6
commit 73b1552
Showing 1 changed file with 28 additions and 0 deletions.
diff --git a/05-js/scroll-gsap.html b/05-js/scroll-gsap.html
@@ -4,9 +4,35 @@
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>scroll gsap</title>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
         <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
         <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ScrollTrigger.min.js"></script>
         <style>
+            #header {
+                position: fixed;
+                top: 0;
+                left: 0;
+                z-index: 1000;
+                width: 100%;
+                height: 100px;
+                background: rgba(0, 0, 0, 0.5);
+                color: #fff;
+                text-align: center;
+                line-height: 100px;
+                font-size: 3rem;
+            }
+            #to-top {
+                position: fixed;
+                bottom: 30px;
+                right: 30px;
+                width: 100px;
+                height: 100px;
+                background: blue;
+                color: #fff;
+                text-align: center;
+                line-height: 100px;
+                border-radius: 5px;
+            }
             .container div {
                 width: 100px;
                 height: 100px;
@@ -39,6 +65,7 @@
         </style>
     </head>
     <body>
+        <div id="header">header</div>
         <section class="sec1">
             <div class="box1"></div>
         </section>
@@ -51,6 +78,7 @@
             <div class="item2"></div>
             <div class="item3"></div>
         </div>
+        <div id="to-top">top</div>
         <script>
             gsap.registerPlugin(ScrollTrigger);