Editing List

index.js

@@ -249,4 +249,16 @@ list_btn.onclick=function()
 {
   
   list.classList.toggle("hidden")
-}
\ No newline at end of file
+}
+let lastScrollTop = 0;
+
+  window.addEventListener("scroll", function () {
+    let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+
+    if (scrollTop > lastScrollTop) {
+       list.classList.add("hidden")
+
+    } 
+
+    lastScrollTop = scrollTop <= 0 ? 0 : scrollTop; 
+  });
\ No newline at end of file

style.css

@@ -821,12 +821,12 @@ background: linear-gradient(to bottom ,var(--purple_col) 20%,var(--bck_color));
     row-gap: 20px;
     justify-content: center;
     position: fixed;
-      background: linear-gradient(to right,var(--purple_col), #6a1a97,var(--bck_color));
+      background:var(--bck_color);
     width: 100%;
     right: 0;
-    padding-top: 10px;
+    padding: 20px 10px;
     top: 75px;
-    transition: .3s;
+     transition: transform 0.3s ease, opacity 0.3s ease;
 }
 .right_side_h a
 {
@@ -843,7 +843,7 @@ background: linear-gradient(to bottom ,var(--purple_col) 20%,var(--bck_color));
 
 .hidden
 {
-    display: none !important;
+    transform: translateX(100%);
     width: 0;
 }
 /* ========================= */