Merge pull request #189 from agileware-jp/feature-88573-fixed-toggle-…

…sidebar-button

Feature 88573 サイドバーの開閉ボタンをスクロール時に見きれないように固定する

src/js/sidebar.js

@@ -109,5 +109,44 @@ export function initToggleSidebar() {
     } else {
       openSidebar()
     }
+
+    // sidebar開閉ボタンの固定
+    fixedToggleSidebarButton(toggleTrigger)
+  }
+}
+
+/**
+ * Sidebarの開閉ボタンをスクロール時に固定する
+ */
+function fixedToggleSidebarButton(toggleButton) {
+  const sidebar = document.getElementById('sidebar')
+  const mediaQuery = window.matchMedia('(max-width: 899px)')
+
+
+  function handleScroll(fixedPosition) {
+    if(window.scrollY < fixedPosition) {
+      toggleButton.style.position = 'absolute'
+    } else {
+      toggleButton.style.position = 'fixed'
+    }
   }
+
+  let scrollHandler
+
+  function checkAndExecute() {
+    const fixedPosition = sidebar.getBoundingClientRect().top + window.scrollY
+    if (!mediaQuery.matches) {
+      // PC表示のときはスクロールに応じた処理を追加
+      scrollHandler = () => handleScroll(fixedPosition)
+      window.addEventListener('scroll', scrollHandler)
+    } else {
+      // スマホ表示のときは処理を削除して初期状態にリセット
+      if(scrollHandler) {
+        window.removeEventListener('scroll', scrollHandler)
+      }
+    }
+  }
+
+  checkAndExecute()
+  mediaQuery.addEventListener('change', checkAndExecute)
 }

src/sass/components/buttons.scss

@@ -59,14 +59,14 @@
   .aw_backToTop {
     // @extend .BTN_PRIMARY;
     background-image: url(images/arrow_upward_onFill.svg);
-    @apply cursor-pointer inline-block overflow-hidden indent-[100%] whitespace-nowrap w-8 h-8 bg-center align-middle bg-background-dark/80 bg-no-repeat border-none p-0 rounded-md fixed right-4 bottom-4 z-[499] hover:bg-background-dark/70 shadow-md
+    @apply cursor-pointer inline-block overflow-hidden indent-[100%] whitespace-nowrap w-8 h-8 bg-center align-middle bg-background-dark/80 bg-no-repeat border-none p-0 rounded-lg fixed right-4 bottom-4 z-[499] hover:bg-background-dark/70 shadow-md
   }
 
   // Sidebarの開閉ボタン
   .aw_toggleSidebar {
     @extend .BTN_TERTIARY_ICON_ONLY_OUTLINED;
     background-image: url(images/move_right_default.svg);
-    @apply absolute top-[1.15rem] right-[14.25rem] z-10
+    @apply absolute top-4 right-[14.25rem] z-10
   }
 
   .isSidebarClose .aw_toggleSidebar {