fix: 修复目录滚动抖动

IdeaLeap · Feb 4, 2023 · b56169b · b56169b
1 parent 81b6334
commit b56169b
Showing 1 changed file with 26 additions and 13 deletions.
diff --git a/frontend/components/ArticlesContent/SideBar/Right/Catalogue.vue b/frontend/components/ArticlesContent/SideBar/Right/Catalogue.vue
@@ -72,8 +72,9 @@ const catalogueClass = (level) => {
 }
 
 /**
- * @description: 目录滚动事件
+ * @description: 目录滚动定位事件
  */
+const headerHeight = document.querySelector('.main-header').clientHeight
 const itemOffsetTop = ref([])
 const onScroll = () => {
   itemOffsetTop.value = []
@@ -86,7 +87,7 @@ const onScroll = () => {
       })
     }
   })
-  const scrollTop = document.documentElement.scrollTop - 80
+  const scrollTop = document.documentElement.scrollTop - headerHeight + 20
   for (let n = 0; n < itemOffsetTop.value.length; n++) {
     if (scrollTop >= itemOffsetTop.value[n].top)
       isActive.value = itemOffsetTop.value[n].key
@@ -96,28 +97,36 @@ const onScroll = () => {
     left: 0,
   })
 }
-const throttledScrollHandler = useThrottleFn(() => {
-  onScroll()
-}, 300)
+// const throttledScrollHandler = useThrottleFn(() => {
+//   onScroll()
+// }, 300)
 
 /**
  * @description: 目录固定
  */
+const isNavShown = inject('isNavShown')
 const firtstCatalogueTop = ref(0)
-const headerHeight = document.querySelector('.main-header ').clientHeight
+let catalogue
+let currentTop
 const scrollFixedCatalogue = () => {
   const scrollTop = document.documentElement.scrollTop
   const sideBar = document.querySelector('.sidebar')
-  const catalogue = document.querySelector('.sticky-block-box')
-  if (scrollTop > catalogue.offsetTop)
+  catalogue = document.querySelector('.sticky-block-box')
+  currentTop = parseFloat(window.getComputedStyle(catalogue).top)
+  if (scrollTop - headerHeight > catalogue.offsetTop)
     sideBar.classList.add('sticky')
-
-  if (sideBar.classList.contains('sticky') && scrollTop - headerHeight < firtstCatalogueTop.value)
+  if (scrollTop <= firtstCatalogueTop.value)
     sideBar.classList.remove('sticky')
 }
 
+watch(isNavShown, (val) => {
+  if (val)
+    catalogue.style.top = `${currentTop + headerHeight}px`
+  else
+    catalogue.style.top = '1.767rem'
+})
 onMounted(() => {
-  window.addEventListener('scroll', throttledScrollHandler)
+  window.addEventListener('scroll', onScroll)
   window.addEventListener('scroll', scrollFixedCatalogue)
   const route = useRoute()
   setTimeout(() => {
@@ -135,7 +144,7 @@ onMounted(() => {
 })
 
 onUnmounted(() => {
-  window.removeEventListener('scroll', throttledScrollHandler)
+  window.removeEventListener('scroll', onScroll)
   window.removeEventListener('scroll', scrollFixedCatalogue)
 })
 </script>
@@ -160,6 +169,10 @@ onUnmounted(() => {
 </template>
 
 <style scoped>
+#heading-3 {
+  position: relative;
+  top: -50px;
+}
 .sidebar-block {
   position: relative;
   /* margin-bottom: 1.5rem; */
@@ -181,7 +194,7 @@ onUnmounted(() => {
   /* background: #fff; */
   border-radius: 4px;
   padding: 0;
-  @apply bg-jj-sidebar
+  @apply bg-jj-sidebar;
 }
 
 .catalog-title {