back round 0 view raw
use IntersectionObserver for sticky component #6

merged
opened by
futur.blue 2 months ago targeting main from futur.blue/pdsls: sticky
kind of an ugly fix, extra h-0 div + IntersectionObserver but it fixes safari and works on every other browser
options
unified split
Changed files
+32 -33
src
components
sticky.tsx
+32 -33
src/components/sticky.tsx
···

       4
       4
        
         const [filterStuck, setFilterStuck] = createSignal(false);

     

       5
       5
        
       

     

       6
       6
        
         return (

     

       7
       7
       -
           <div

     

       8
       8
       -
             ref={(node) => {

     

       9
       9
       -
               onMount(() => {

     

       10
       10
       -
                 let ticking = false;

     

       11
       11
       -
                 const tick = () => {

     

       12
       12
       -
                   const topPx = parseFloat(getComputedStyle(node).top);

     

       13
       13
       -
                   const { top } = node.getBoundingClientRect();

     

       14
       14
       -
                   setFilterStuck(top <= topPx + 0.5);

     

       15
       15
       -
                   ticking = false;

     

       16
       16
       -
                 };

     

       7
       7
       +
           <>

     

       8
       8
       +
             <div

     

       9
       9
       +
               ref={(trigger) => {

     

       10
       10
       +
                 onMount(() => {

     

       11
       11
       +
                   const observer = new IntersectionObserver(

     

       12
       12
       +
                     ([entry]) => setFilterStuck(!entry.isIntersecting),

     

       13
       13
       +
                     {

     

       14
       14
       +
                       rootMargin: "-8px 0px 0px 0px",

     

       15
       15
       +
                       threshold: 0,

     

       16
       16
       +
                     },

     

       17
       17
       +
                   );

     

       17
       18
        
       

     

       18
       18
       -
                 const onScroll = () => {

     

       19
       19
       -
                   if (!ticking) {

     

       20
       20
       -
                     ticking = true;

     

       21
       21
       -
                     requestAnimationFrame(tick);

     

       22
       22
       -
                   }

     

       23
       23
       -
                 };

     

       19
       19
       +
                   observer.observe(trigger);

     

       24
       20
        
       

     

       25
       25
       -
                 window.addEventListener("scroll", onScroll, { passive: true });

     

       26
       26
       -
       

     

       27
       27
       -
                 tick();

     

       28
       28
       -
       

     

       29
       29
       -
                 onCleanup(() => {

     

       30
       30
       -
                   window.removeEventListener("scroll", onScroll);

     

       21
       21
       +
                   onCleanup(() => {

     

       22
       22
       +
                     observer.unobserve(trigger);

     

       23
       23
       +
                     observer.disconnect();

     

       24
       24
       +
                   });

     

       31
       25
        
                 });

     

       32
       32
       -
               });

     

       33
       33
       -
             }}

     

       34
       34
       -
             class="sticky top-2 z-10 flex flex-col items-center justify-center gap-2 rounded-lg p-3 transition-colors"

     

       35
       35
       -
             classList={{

     

       36
       36
       -
               "bg-neutral-50 dark:bg-dark-300 border-[0.5px] border-neutral-300 dark:border-neutral-700 shadow-md":

     

       37
       37
       -
                 filterStuck(),

     

       38
       38
       -
               "bg-transparent border-transparent shadow-none": !filterStuck(),

     

       39
       39
       -
             }}

     

       40
       40
       -
           >

     

       41
       41
       -
             {props.children}

     

       42
       42
       -
           </div>

     

       26
       26
       +
               }}

     

       27
       27
       +
               class="pointer-events-none h-0"

     

       28
       28
       +
               aria-hidden="true"

     

       29
       29
       +
             />

     

       30
       30
       +
       

     

       31
       31
       +
             <div

     

       32
       32
       +
               class="sticky top-2 z-10 flex flex-col items-center justify-center gap-2 rounded-lg p-3 transition-colors"

     

       33
       33
       +
               classList={{

     

       34
       34
       +
                 "bg-neutral-50 dark:bg-dark-300 border-[0.5px] border-neutral-300 dark:border-neutral-700 shadow-md":

     

       35
       35
       +
                   filterStuck(),

     

       36
       36
       +
                 "bg-transparent border-transparent shadow-none": !filterStuck(),

     

       37
       37
       +
               }}

     

       38
       38
       +
             >

     

       39
       39
       +
               {props.children}

     

       40
       40
       +
             </div>

     

       41
       41
       +
           </>

     

       43
       42
        
         );

     

       44
       43
        
       };