added sticky to the swiper

canopas · Oct 30, 2023 · c46f590 · c46f590
1 parent 3d83369
commit c46f590
Showing 1 changed file with 77 additions and 24 deletions.
diff --git a/vue-frontend/src/components/flutter-app-development/DevelopmentSection.vue b/vue-frontend/src/components/flutter-app-development/DevelopmentSection.vue
@@ -3,7 +3,7 @@
     class="tw-pt-14 md:tw-py-[7.5rem] md:tw-mt-[10rem] tw-bg-black-core tw-text-white tw-text-center"
   >
     <div
-      class="tw-container tw-flex tw-flex-col tw-gap-4 md:tw-gap-6 md:tw-w-[54.4375rem]"
+      class="tw-container tw-flex tw-flex-col tw-gap-4 md:tw-gap-6 md:tw-w-[54.4375rem] md:tw-mb-[4.5rem]"
     >
       <span class="header-2"> Flutter App Development Services </span>
       <span class="sub-h1-regular">
@@ -43,7 +43,7 @@
         class="swiper-container tw-rounded-lg"
       >
         <swiper-slide
-          v-for="(item, index) in item"
+          v-for="(item, index) in items"
           :key="index"
           class="tw-cursor-pointer tw-px-4"
         >
@@ -63,30 +63,32 @@
 
     <!-- Flutter Desktop Swiper UI -->
     <div
-      class="tw-hidden tw-container lg:tw-flex tw-relative tw-overflow-hidden"
+      id="stickyParent"
+      class="tw-hidden lg:tw-block tw-relative tw-h-screen"
     >
-      <div class="tw-sticky !tw-mt-[4.5rem]">
+      <div
+        class="!tw-sticky tw-top-[6.5rem] tw-container main tw-overflow-hidden"
+      >
         <hr
           class="tw-absolute tw-h-screen tw-left-[50%] tw-border-[0.1px] tw-opacity-[0.5]"
         />
         <swiper
-          :slidesPerView="'auto'"
+          :slidesPerView="1.7"
           :spaceBetween="72"
           :direction="'vertical'"
-          :speed="600"
-          :mousewheel="{
-            forceToAxis: true,
-            sensitivity: 1,
-            releaseOnEdges: true,
-          }"
+          :speed="500"
+          :mousewheel="true"
+          :touchReleaseOnEdges="true"
           :modules="modules"
-          class="!tw-h-[60vh] 2xl:!tw-h-[60vh] xll:!tw-h-[46vh] 3xl:!tw-h-[30vh]"
+          :allowTouchMove="false"
+          class="!tw-h-[80vh]"
+          @swiper="setSwiperRef"
           @slideChange="onSlideChange"
         >
           <swiper-slide
             v-for="(item, index) in items"
             :key="index"
-            class="!tw-h-fit"
+            class="!tw-h-auto"
             :class="[
               {
                 'tw-opacity-50': activeIndex !== index,
@@ -151,7 +153,14 @@ export default {
   data() {
     return {
       modules: [Autoplay, Mousewheel, Pagination],
+      swiper: null,
+      swiperRef: 0,
       activeIndex: 0,
+      skipNext: true,
+      lastScrollY: 0,
+      isScrollingUp: false,
+      scrollPosition: 0,
+      lastSlideReached: false,
       items: [
         {
           title: `Flutter App Development <br/>Consultation`,
@@ -197,23 +206,67 @@ export default {
     };
   },
   mounted() {
-    document.addEventListener("scroll", this.handleScroll);
-  },
-  beforeDestroy() {
-    document.removeEventListener("scroll", this.handleScroll);
+    window.addEventListener("scroll", this.handleScroll);
+    window.addEventListener("scroll", this.handleScrollTop);
+    document.removeEventListener("wheel", this.handleWheel);
   },
-  computed: {
-    item() {
-      return Array(1).fill(this.items).flat();
-    },
+  unmounted() {
+    document.removeEventListener("wheel", this.handleWheel);
+    window.removeEventListener("scroll", this.handleScrollTop);
+    window.removeEventListener("scroll", this.handleScroll);
   },
   methods: {
-    handleScroll() {
-      const windowHeight = window.innerHeight;
-    },
     onSlideChange(event) {
       this.activeIndex = event.activeIndex;
     },
+    setSwiperRef(swiper) {
+      this.swiperRef = swiper;
+    },
+    scrollDirectionIsUp(event) {
+      if (event.wheelDelta) {
+        return event.wheelDelta > 0;
+      }
+      return event.deltaY < 0;
+    },
+
+    handleWheel(event) {
+      if (this.scrollDirectionIsUp(event)) {
+        this.skipNext = false;
+      } else {
+        this.skipNext = true;
+      }
+    },
+    handleScrollTop() {
+      const stickyParent = document.getElementById("stickyParent");
+      const stickyTop = stickyParent.offsetTop;
+      let scrollTop = window.scrollY;
+      var position = stickyParent.getBoundingClientRect();
+      if (
+        window.pageYOffset >= stickyTop &&
+        position.bottom >=
+          (window.innerHeight || document.documentElement.clientHeight)
+      ) {
+        console.log(this.activeIndex);
+        this.swiperRef.mousewheel.enable();
+        this.swiperRef.allowTouchMove = true;
+      } else {
+        this.swiperRef.mousewheel.disable();
+        this.swiperRef.allowTouchMove = true;
+      }
+      this.lastScrollY = scrollTop;
+    },
+    handleScroll() {
+      const windowHeight = window.innerHeight;
+      const lastSlide = document.querySelector(".main:last-child");
+      const lastSlidePosition = lastSlide.getBoundingClientRect().top;
+      if (lastSlidePosition <= windowHeight && lastSlidePosition >= 0) {
+        this.lastSlideReached = true;
+        this.isScrollingUp = window.scrollY < this.scrollPosition;
+      } else {
+        this.lastSlideReached = false;
+      }
+      this.scrollPosition = window.scrollY;
+    },
   },
   components: {
     Swiper,