[2주차 기본/심화 과제] 웨비의 사진관 😋

week2/assign1/index.html

@@ -165,9 +165,10 @@ <h1>2021</h1>
         </div>
       </section>
     </main>
-    <a class="top-btn" href="#top">
+    <a id="top-btn" href="#top">
       <button type="button">▴</button>
     </a>
     <footer>end</footer>
+    <script src="script.js"></script>
   </body>
 </html>

week2/assign1/script.js

@@ -0,0 +1,7 @@
+const windowHeight = window.innerHeight;
+const topBtn = document.getElementById("top-btn");
+
+document.addEventListener("scroll", () => {
+  console.log(window.scrollY, windowHeight);
+  topBtn.style.opacity = window.scrollY / windowHeight / 2;
+});

week2/assign1/style.css

@@ -315,7 +315,9 @@ footer {
 }
 
 /* top button */
-.top-btn {
+#top-btn {
+  opacity: 0;
+
   background-color: var(--green-color);
   color: var(--white-color);