diff --git a/src/components/Dots/index.js b/src/components/Dots/index.js index e69de29..57dc57a 100644 --- a/src/components/Dots/index.js +++ b/src/components/Dots/index.js @@ -0,0 +1,88 @@ +import React, { useState, useEffect } from "react"; +import _ from "lodash"; + +export default function Dots() { + const [scroll, setScroll] = useState(null); + const [active, setActive] = useState(null); + const height = window.innerHeight; + useEffect(() => { + window.addEventListener( + "scroll", + _.debounce(() => setScroll(window.scrollY), 20) + ); + }, []); + + useEffect(() => { + if (window.scrollY < height) { + setActive(() => 0); + } + if (window.scrollY > height && window.scrollY < 2 * height) { + setActive(() => 1); + } + if (window.scrollY > height && window.scrollY < 2 * height) { + setActive(() => 2); + } + if (window.scrollY > 2 * height && window.scrollY < 2.3 * height) { + setActive(() => 3); + } + if (window.scrollY > 2.3 * height && window.scrollY < 2.5 * height) { + setActive(() => 4); + } + if (window.scrollY > 2.5 * height && window.scrollY < 3 * height) { + setActive(() => 5); + } + if (window.scrollY > 3 * height && window.scrollY < 4 * height) { + setActive(() => 6); + } + if (window.scrollY > 4 * height && window.scrollY < 4.99 * height) { + setActive(() => 7); + } + if (window.scrollY > 4.99 * height && window.scrollY < 5.5 * height) { + setActive(() => 8); + } + if (window.scrollY > 5.5 * height && window.scrollY < 7 * height) { + setActive(() => 9); + } + }, [scroll]); + + return ( +
+ {[0, 1, 2, 2.35, 2.5, 3, 4, 4.99, 5.5, 7].map((position, index) => ( + + ))} +
+ ); +} + +const Dot = ({ value, active, index, setActive }) => { + const click = () => { + setActive(() => index); + window.scrollTo(0, value * window.innerHeight); + }; + return ( +
click()} + > +
+
+ ); +};