consulting page scroll bug fix (#795)

* consulting page scroll bug fix

* changed that code only affects the consulting page

* clean formating consulting index.html

* how-we-work consulting page clean formating

Author: klijakub

assets/css/pages/consulting.scss

@@ -685,14 +685,14 @@
       }
     }
     .square-3-wrap {
-    display: flex;
+      display: flex;
 
-    .multiple-squares {
-      @media (max-width: $screen-md-max) {
-        display: none;
+      .multiple-squares {
+        @media (max-width: $screen-md-max) {
+          display: none;
+        }
       }
     }
-    }
 
     .square-4 {
       top: -46px;
@@ -727,7 +727,7 @@
       justify-content: space-around;
     }
 
-    .box {
+    .box-consulting {
       position: relative;
       opacity: 30%;
       max-width: 465px;
@@ -749,7 +749,7 @@
       }
     }
 
-    .box.active {
+    .box-consulting.active {
       opacity: 100%;
 
       @media (max-width: $screen-md-max) {

assets/js/consulting.js

@@ -8543,7 +8543,7 @@ $(function () {
       }
     });
 
-    $(".question").each(function() {
+    $(".question").each(function () {
       if ($(this).find("input:checked").length == 0) {
         showInputError(this);
         isValid = false;
@@ -8624,6 +8624,56 @@ $(function () {
   submitButton.on("click", submitForm);
 });
 
+/* Consulting page */
+(function ($) {
+  if ($("body.consulting").length) {
+    $(window).scroll(function () {
+      var scrollTop = $(document).scrollTop() + $(window).height() / 2;
+      var positions = [];
+      $(".box-consulting").each(function () {
+        $(this).removeClass("active");
+        positions.push({
+          position: $(this).offset().top,
+          element: $(this),
+        });
+      });
+      var getClosest = closest(positions, scrollTop);
+      getClosest.addClass("active"); // the element closest to the middle of the screen
+
+      var classList = $(".active").attr("class");
+      var classArr = classList.split(/\s+/);
+
+      $(".box-consulting").each(function () {
+        if ($(this).hasClass(classArr[1]) && !$(this).hasClass("active")) {
+          $(this).addClass("active");
+        }
+      });
+
+      check();
+    });
+
+    function closest(array, number) {
+      var num = 0;
+      for (var i = array.length - 1; i >= 0; i--) {
+        if (
+          Math.abs(number - array[i].position) <
+          Math.abs(number - array[num].position)
+        ) {
+          num = i;
+        }
+      }
+      return array[num].element;
+    }
+
+    function check() {
+      var activeBox = $(".active");
+
+      $(".square").removeClass("active");
+      $(".square-" + activeBox.data("box")).addClass("active");
+    }
+  }
+})(window.jQuery);
+
 /* Ref Arch */
 $("#ref-arch-accordion").on("show.bs.collapse", function (event) {
   $(event.target)

assets/js/main.js

@@ -117,25 +117,25 @@ <h2>How We Work</h2>
         </svg>
       </div>
       <div class="right-side">
-        <div class="box box-1 active">
+        <div class="box-consulting box-1 active">
           <h3>Gather requirements</h3>
           <p>We work with you to deeply understand the problem you're trying to solve.</p>
         </div>
-        <div class="box box-2">
+        <div class="box-consulting box-2">
           <h3>Put together a proposal</h3>
           <p>We put together a plan for the solution we will build.</p>
         </div>
-        <div class="box box-3">
+        <div class="box-consulting box-3">
           <h3>Incremental delivery</h3>
           <p>In our proposal, we plan out the work in 2-week sprints with the requirement that we deliver something of
             value to you at the end of every single sprint (and not just at the very end of the project).</p>
         </div>
-        <div class="box box-4">
+        <div class="box-consulting box-4">
           <h3>Constant communication</h3>
           <p>You get to participate in planning at the start of each sprint and provide feedback on the deliverables at
             the end of each sprint.</p>
         </div>
-        <div class="box box-5">
+        <div class="box-consulting box-5">
           <h3>Maintenance & support</h3>
           <p>We provide long-term commercial maintenance and support for everything we build.</p>
         </div>

pages/consulting/_how-we-work.html

@@ -4,8 +4,7 @@
 excerpt: DevOps Consulting. Done Right.
 permalink: /consulting/
 slug: consulting
-custom_js:
-- consulting
+
 ---
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css" />