fix(@dpc-sdp/ripple-ui-core): fix media query, update back to top pos…

…itioning
dpc-sdp · Jan 8, 2024 · 3965341 · 3965341
1 parent 08ccc83
commit 3965341
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 3 deletions.
diff --git a/packages/ripple-ui-core/src/components/layout/RplLayoutBackToTop.css b/packages/ripple-ui-core/src/components/layout/RplLayoutBackToTop.css
@@ -1,3 +1,5 @@
+@import '@dpc-sdp/ripple-ui-core/style/breakpoints';
+
 .rpl-back-to-top {
   position: relative;
   pointer-events: none;

diff --git a/packages/ripple-ui-core/src/components/layout/RplLayoutBackToTop.vue b/packages/ripple-ui-core/src/components/layout/RplLayoutBackToTop.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import RplButton from '../button/RplButton.vue'
-import { useWindowScroll } from '@vueuse/core'
+import { useWindowScroll, useElementBounding } from '@vueuse/core'
 import { ref, computed } from 'vue'
 
 interface Props {
@@ -16,6 +16,7 @@ const SCROLL_THRESHOLD = 1080
 const containerRef = ref(null)
 
 const { y: scrollY } = useWindowScroll()
+const { top: offsetTop } = useElementBounding(containerRef)
 
 const isShown = computed(() => {
   return scrollY.value > SCROLL_THRESHOLD
@@ -26,8 +27,7 @@ const isSticky = computed(() => {
     return false
   }
 
-  const bottomPos = containerRef.value.offsetTop - window.innerHeight
-  return scrollY.value < bottomPos
+  return offsetTop.value > window.innerHeight
 })
 </script>