React sticky hook

import React, { Fragment, useEffect, useRef, useState } from 'react';
import Sticky from './sticky';

export default () => {
  const [isSticky, setSticky] = useState(false);
  const ref = useRef(null);
  const handleScroll = () => {
    if (ref.current) {
      setSticky(ref.current.getBoundingClientRect().top <= 0);
    }
  };

  useEffect(() => {
    window.addEventListener('scroll', handleScroll);

    return () => {
      window.removeEventListener('scroll', () => handleScroll);
    };
  }, []);

  return (
    <Fragment>
      <p>Lorem ipsum...</p>
      <div className={`sticky-wrapper${isSticky ? ' sticky' : ''}`} ref={ref}>
        <Sticky />
      </div>
      <p>Lorem ipsum...</p>
    </Fragment>
  );
};

Source: pantaley.com

Similar codes

0 vote131 views1 answer
Label tag alternative in react native
Javascript React
0 vote126 views1 answer
Use of undeclared identifier 'gmsservices' react native
Javascript React
64 votes166 views7 answers
React router
Javascript React
8 votes123 views4 answers
Get current url react router
Javascript React
1 vote161 views1 answer
Java.lang.outofmemoryerror (no error message) react native
Javascript React
0 vote134 views3 answers
Line 32:18: 'Link' is not defined react/jsx-no-undef
Javascript React
1 vote132 views1 answer
React native get current time
Javascript React
0 vote124 views1 answer
How to solve Error: EPERM: operation not permitted, mkdir 'C:\Users\SKY' while downoad react
Javascript React
4 votes164 views1 answer
How to add oAuth google signin in react native app
Javascript React
0 vote145 views1 answer
Truncate function react
Javascript React