update src/components/Dots/index.js

temp
mahdi 2 years ago
parent e6de5f1c09
commit 50aa62e32f
  1. 88
      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 (
<div className="flex flex-col items-center fixed z-50 top-1/2 lg:right-3 xl:right-5 transform -translate-y-1/2">
{[0, 1, 2, 2.35, 2.5, 3, 4, 4.99, 5.5, 7].map((position, index) => (
<Dot
key={index}
value={position}
active={Number(index) === active}
setActive={setActive}
index={index}
/>
))}
</div>
);
}
const Dot = ({ value, active, index, setActive }) => {
const click = () => {
setActive(() => index);
window.scrollTo(0, value * window.innerHeight);
};
return (
<div
className={_.join(
[
"rounded-full mb-2 cursor-pointer transition-all",
active ? "p-0.5 border-2" : "p-0",
],
" "
)}
style={{ border: active ? "2px solid blue" : "" }}
onClick={() => click()}
>
<div
className={_.join(
["w-3.5 h-3.5 rounded-full", active ? "bg-blueC0" : "bg-blue90"],
" "
)}
></div>
</div>
);
};
Loading…
Cancel
Save