5 |
6 | Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
7 | doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo
8 | inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
9 | Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut
10 | fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem
11 | sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit
12 | amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora
13 | incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad
14 | minima veniam, quis nostrum exercitationem ullam corporis suscipit
15 | laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum
16 | iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae
17 | consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur
18 |
19 |
20 | );
21 |
22 | export default About;
23 |
--------------------------------------------------------------------------------
/src/hooks/useSticky.js:
--------------------------------------------------------------------------------
1 | import { useEffect, useState, useRef } from "react";
2 |
3 | function useSticky () {
4 | const [isSticky, setSticky] = useState(false);
5 | const element = useRef(null)
6 |
7 | const handleScroll = () => {
8 | window.scrollY > element.current.getBoundingClientRect().bottom
9 | ? setSticky(true)
10 | : setSticky(false);
11 | }
12 |
13 | // This function handle the scroll performance issue
14 | const debounce = (func, wait = 20, immediate = true) => {
15 | let timeOut;
16 | return () => {
17 | let context = this,
18 | args = arguments;
19 | const later = () => {
20 | timeOut = null;
21 | if (!immediate) func.apply(context, args);
22 | };
23 | const callNow = immediate && !timeOut;
24 | clearTimeout(timeOut);
25 | timeOut = setTimeout(later, wait);
26 | if (callNow) func.apply(context, args);
27 | };
28 | };
29 |
30 |
31 | useEffect(() => {
32 | window.addEventListener("scroll", debounce(handleScroll))
33 | return () => {
34 | window.removeEventListener("scroll", () => handleScroll);
35 | }
36 | }, [debounce, handleScroll])
37 |
38 |
39 | return { isSticky, element }
40 | }
41 |
42 | export default useSticky
43 |
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 
13 |