diff --git a/assets/css/styles.css b/assets/css/styles.css
index c95c6f5..27bb226 100644
--- a/assets/css/styles.css
+++ b/assets/css/styles.css
@@ -25,18 +25,14 @@ header {
 .index-navbar.enabled {
   height: 100vh;
 }
-@screen md {
-  .index-navbar {
-    width:  4rem;
-    height: 100vh;
-  }
-  .index-navbar.enabled {
-    width: 100vw;
-  }
-}
 .index-navbar header {
   z-index: 12;
   @apply transition duration-300 ease-in-out h-full;
+}
+.index-navbar.enabled header {
+  background-color: rgba(0,0,0,0.5);
+}
+.index-navbar.detached header {
   background-color: rgba(0,0,0,0.5);
 }
 .index-header {
@@ -67,31 +63,18 @@ header {
 }
 .site-background {
   position: absolute;
+  opacity: 0%;
   top: -23vh;
   width: 100vw;
   height: 100vh;
   @apply transition-all duration-300 ease-in-out;
 }
 .index-navbar.enabled .site-background {
+  opacity: 100%;
   top: 0;
 }
-@screen md {
-  .site-background {
-    top:0;
-    right: -25vw;
-  }
-  .index-navbar.enabled .site-background {
-    top: 0;
-    right: 0;
-  }
-}
 .main-container {
-  @apply pt-16 relative;
-}
-@screen md {
-  .main-container {
-    @apply pt-0 ml-16 min-h-screen;
-  }
+  @apply relative;
 }
 /* 3. Content Styling */
 #post p {
diff --git a/assets/js/nav-collapse.js b/assets/js/nav-collapse.js
index dcd08d0..a1960e8 100644
--- a/assets/js/nav-collapse.js
+++ b/assets/js/nav-collapse.js
@@ -3,4 +3,55 @@ $("#menushow").click(function(){
 })
 $(".nav li").click(function(){
     $(".index-navbar").toggleClass('enabled');
-})
\ No newline at end of file
+})
+
+    
+$(document).ready(function () {
+        
+        var nav = document.querySelector('.index-navbar');
+        var feed = document.querySelector('.content');
+
+        var lastScrollY = window.scrollY;
+        var lastWindowHeight = window.innerHeight;
+        var lastDocumentHeight = $(document).height();
+        var ticking = false;
+
+        function onScroll() {
+            lastScrollY = window.scrollY;
+            requestTick();
+        }
+
+        function onResize() {
+            lastWindowHeight = window.innerHeight;
+            lastDocumentHeight = $(document).height();
+            requestTick();
+        }
+
+        function requestTick() {
+            if (!ticking) {
+                requestAnimationFrame(update);
+            }
+            ticking = true;
+        }
+
+        function update() {
+            var trigger = feed.getBoundingClientRect().top + window.scrollY;
+            var progressMax = lastDocumentHeight - lastWindowHeight;
+
+            // show/hide nav
+            if (lastScrollY >= nav.getBoundingClientRect().bottom) {
+                nav.classList.add('detached');
+            } else {
+                nav.classList.remove('detached');
+            }
+
+            ticking = false;
+        }
+
+        window.addEventListener('scroll', onScroll, { passive: true });
+        window.addEventListener('resize', onResize, false);
+
+        update();
+
+    });
+
diff --git a/package.json b/package.json
index 253285a..bfb3ea8 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
     "name": "yuika",
     "description": "nanao.moe's blog theme",
-    "version": "2.5.2",
+    "version": "2.6.0",
     "engines": {
         "ghost-api": "v3"
     },