fix: buggy sticky header when there're multiple tables

deps/shui/src/logseq/shui/table/core.cljc

@@ -1,7 +1,8 @@
 (ns logseq.shui.table.core
   "Table"
   (:require [clojure.set :as set]
-            [dommy.core :refer-macros [sel1]]
+            [dommy.core :refer-macros [sel1] :as dom]
+            [frontend.util :as util]
             [goog.object :as gobj]
             [logseq.shui.hooks :as hooks]
             [logseq.shui.table.impl :as impl]
@@ -144,16 +145,14 @@
                  prop)
      children]))
 
-;; FIXME: another solution for the sticky header
-(defn- use-sticky-element2!
+(defn- use-sticky-element!
   [^js/HTMLDivElement target-ref container]
   (hooks/use-effect!
    (fn []
      (let [^js target (rum/deref target-ref)
            ^js container (or (.closest target ".sidebar-item-list") container)
-           ^js table (.closest target ".ls-table-rows")
-           refs-table? (.closest table ".references")]
-       (when (and (not refs-table?) container table)
+           ^js table (.closest target ".ls-table-rows")]
+       (when (and container table)
          (let [^js target-cls (.-classList target)
                ^js table-footer (some-> table (.querySelector ".ls-table-footer"))
                ^js page-el (.closest target ".page-inner")
@@ -182,15 +181,24 @@
                                 (set! (. target -scrollLeft) (.-scrollLeft table)))
                ;; target observer
                target-observe! (fn []
-                                 (let [scroll-top (js/parseInt (.-scrollTop container))
-                                       table-in-top (+ scroll-top head-height)
-                                       table-bottom (.-bottom (.getBoundingClientRect table))
-                                       fixed? (and (> table-bottom (+ head-height 90))
-                                                   (> table-in-top @*el-top))]
-                                   (if fixed?
-                                     (.add target-cls "ls-fixed")
-                                     (.remove target-cls "ls-fixed"))
-                                   (update-target!)))
+                                 (let [first-visible-table (some #(when (util/el-visible-in-viewport? % true) %)
+                                                                 (dom/sel container ".ls-table-rows"))]
+                                   (when (= table first-visible-table)
+                                     (let [scroll-top (js/parseInt (.-scrollTop container))
+                                           table-in-top (+ scroll-top head-height)
+                                           table-bottom (.-bottom (.getBoundingClientRect table))
+                                           table-top (.-top (.getBoundingClientRect table))
+                                           target-top (.-top (.getBoundingClientRect target))
+                                           fixed? (and (> table-bottom (+ head-height 90))
+                                                       (> table-in-top @*el-top))]
+                                       (cond
+                                         (and (pos? target-top) (pos? table-top) (>= target-top table-top))
+                                         (.remove target-cls "ls-fixed")
+                                         fixed?
+                                         (.add target-cls "ls-fixed")
+                                         :else
+                                         (.remove target-cls "ls-fixed"))
+                                       (update-target!)))))
                target-observe-handle! (fn [^js _e]
                                         (when (not @*ticking?)
                                           (js/window.requestAnimationFrame
@@ -222,7 +230,7 @@
   [& prop-and-children]
   (let [[prop children] (get-prop-and-children prop-and-children)
         el-ref (rum/use-ref nil)
-        _ (when-not (mobile?) (use-sticky-element2! el-ref (:main-container prop)))]
+        _ (when-not (mobile?) (use-sticky-element! el-ref (:main-container prop)))]
     [:div.ls-table-header
      (merge {:class "border-y transition-colors bg-gray-01"
              :ref el-ref
@@ -260,9 +268,7 @@
 (rum/defc table-actions < rum/static
   [& prop-and-children]
   (let [[prop children] (get-prop-and-children prop-and-children)
-        el-ref (rum/use-ref nil)
-        ;; _ (use-sticky-element2! (get-main-scroll-container) el-ref)
-        ]
+        el-ref (rum/use-ref nil)]
     [:div.ls-table-actions.flex.flex-row.items-center.gap-1.bg-gray-01
      (merge {:ref el-ref
              :style {:z-index 101}}