DBC22-4237: Updated handle scroll to use IntersectionObserver for style changes on sticky filters

Author: minORC

src/frontend/src/pages/CamerasListPage.js

@@ -256,22 +256,36 @@ export default function CamerasListPage() {
 
   // Handle sticky filters on mobile
   useEffect(() => {
-    const element = document.querySelector('.sticky-filters');
-    if (!element) return;
-
-    const handleScroll = () => {
-      const rect = element.getBoundingClientRect();
-      // If the element's top is less than or equal to headerHeight, it's stuck
-      const stuck = rect.top <= headerHeightContext;
-      element.toggleAttribute('stuck', stuck);
+    const sentinel = document.querySelector('.sticky-sentinel');
+    const target = document.querySelector('.sticky-filters');
+    if (!sentinel || !target) return;
+
+    let rafId = null;
+
+    const updateStuck = (entry) => {
+      if (rafId) cancelAnimationFrame(rafId);
+      rafId = requestAnimationFrame(() => {
+        const isStuck = entry.intersectionRatio === 0;
+        target.toggleAttribute('stuck', isStuck);
+      });
     };
 
-    // window.addEventListener('scroll', handleScroll);
-    // // Initial check
-    // handleScroll();
+    const observer = new IntersectionObserver(
+      ([entry]) => updateStuck(entry),
+      {
+        root: null,
+        threshold: [0],
+        rootMargin: '-120px 0px 0px 0px',
+      }
+    );
+
+    observer.observe(sentinel);
 
-    return () => window.removeEventListener('scroll', handleScroll);
-  }, [headerHeightContext]);
+    return () => {
+      observer.disconnect();
+      if (rafId) cancelAnimationFrame(rafId);
+    };
+  }, []);
 
   return (
     <React.Fragment>
@@ -298,6 +312,7 @@ export default function CamerasListPage() {
           }
 
           <div className="container--sidepanel__right">
+            <div className="sticky-sentinel" />
             <div className="sticky-filters" style={{ top: `${headerHeightContext}px` }}>
               <div className="controls-group">
                 <div className="controls-container">

src/frontend/src/pages/ContainerSidePanel.scss

@@ -121,13 +121,20 @@
 
   &__right {
     flex: 1 1 auto;
+    
+    .sticky-sentinel {
+      height: 1px;
+      background: none;
+      margin: -1px;
+    }
 
     .sticky-filters {
       position: sticky;
       z-index: 1;
       top: 0;
       padding: 20px 0;
       background: $White;
+      will-change: transform;
 
       &[stuck] {
         @media (max-width: 575px) {
@@ -141,8 +148,6 @@
       @media (max-width: 575px) {
         padding: 0;
         z-index: 20;
-        border-radius: 8px;
-        border: 1px solid $Input-border;
 
         .controls-container {
           .filters-text {

src/frontend/src/pages/EventsListPage.js

@@ -545,22 +545,36 @@ export default function EventsListPage() {
 
   // Handle sticky filters on mobile
   useEffect(() => {
-    const element = document.querySelector('.sticky-filters');
-    if (!element) return;
-
-    const handleScroll = () => {
-      const rect = element.getBoundingClientRect();
-      // If the element's top is less than or equal to headerHeight, it's stuck
-      const stuck = rect.top <= headerHeightContext;
-      element.toggleAttribute('stuck', stuck);
+    const sentinel = document.querySelector('.sticky-sentinel');
+    const target = document.querySelector('.sticky-filters');
+    if (!sentinel || !target) return;
+
+    let rafId = null;
+
+    const updateStuck = (entry) => {
+      if (rafId) cancelAnimationFrame(rafId);
+      rafId = requestAnimationFrame(() => {
+        const isStuck = entry.intersectionRatio === 0;
+        target.toggleAttribute('stuck', isStuck);
+      });
     };
 
-    // window.addEventListener('scroll', handleScroll);
-    // // Initial check
-    // handleScroll();
+    const observer = new IntersectionObserver(
+      ([entry]) => updateStuck(entry),
+      {
+        root: null,
+        threshold: [0],
+        rootMargin: '-120px 0px 0px 0px',
+      }
+    );
+
+    observer.observe(sentinel);
 
-    return () => window.removeEventListener('scroll', handleScroll);
-  }, [headerHeightContext]);
+    return () => {
+      observer.disconnect();
+      if (rafId) cancelAnimationFrame(rafId);
+    };
+  }, []);
 
   // Rendering - Main component
   return (
@@ -588,6 +602,7 @@ export default function EventsListPage() {
           }
 
           <div className="container--sidepanel__right">
+            <div className="sticky-sentinel" />
             <div className="sticky-filters" style={{ top: `${headerHeightContext}px` }}>
               <div className="controls-group">
                 <div className="controls-container">