sticky nav bar

Author: Xanonymous-GitHub

src/components/NavBar.vue

@@ -1,7 +1,7 @@
 <template>
-  <nav class="navbar rounded-pill my-3 navbar-expand-lg navbar-light mx-3">
+  <nav class="navbar navbar-expand-lg navbar-light">
     <div class="container-fluid">
-      <span class="navbar-brand text-white user-select-none fw-bolder fs-lg-4 fs-md-3 fs-sm-2">🔥 Xanonymous's Pending Works</span>
+      <span class="navbar-brand text-white user-select-none fw-bolder fs-lg-4 fs-md-3 fs-sm-2">🔥 X's Pending Works</span>
       <a href="https://github.com/Xanonymous-GitHub/me-xcc-tw" rel="noreferrer noopener" target="_blank">
         <svg class="d-svg rounded-circle" viewBox="0 0 1 1">
           <use xlink:href="#github.svg"/>
@@ -12,14 +12,25 @@
 </template>
 
 <script lang="ts">
-import {defineComponent} from 'vue';
+import {defineComponent, onMounted} from 'vue';
 import '@/scss/components/navbar.scss'
 import '@/svg/github.svg'
 
 export default defineComponent({
   name: 'NavBar',
   setup() {
-    return
+    onMounted(() => {
+      // const el = document.querySelector(".only-one") as HTMLElement
+      const bar = document.querySelector('.navbar') as HTMLElement
+      const observer = new IntersectionObserver(
+          ([e]) => {
+            bar.classList.toggle("nav__sticky", e.intersectionRatio < 1)
+          },
+          {threshold: [1]}
+      );
+
+      observer.observe(bar);
+    })
   }
 });
 </script>

src/scss/components/navbar.scss

@@ -1,15 +1,33 @@
 @import "../mixin";
 
 nav {
+  position: sticky !important;
+  top: -1px;
+  z-index: 1020;
+  border-radius: 50rem;
+  margin: 1rem;
+  transition: .2s ease-in;
+  box-shadow: none;
+
+  &.nav__sticky {
+    transition: .2s ease-in;
+    border-radius: 0;
+    margin: 0;
+    box-shadow: 0 5px 5px 1px rgba(0, 0, 0, 0.2);
+    background-color: rgb(250, 250, 250);
+    background-image: linear-gradient(135deg, white 25%, transparent 25%), linear-gradient(225deg, white 25%, transparent 25%), linear-gradient(315deg, white 25%, transparent 25%), linear-gradient(45deg, white 25%, transparent 25%);
+
+    .navbar-brand {
+      transition: .2s ease-in;
+      color: black !important;
+    }
+  }
+
   .navbar-brand {
     font-size: inherit;
   }
 
-  @include d-svg(40) {
-    @media (max-width: 576px) {
-      display: none;
-    }
-  }
+  @include d-svg(40);
 
   background-color: rgb(17, 17, 17);
   background-position: -50px 0px, -50px 0px, 0% 0%, 0% 0%;