You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
52 lines
1.3 KiB
52 lines
1.3 KiB
2 years ago
|
function qs(selector: any, all = false) {
|
||
|
|
return all
|
||
|
|
? document.querySelectorAll(selector)
|
||
|
|
: document.querySelector(selector);
|
||
|
|
}
|
||
|
|
|
||
|
|
const sections = qs(".section", true);
|
||
|
|
const timeline = qs(".timeline");
|
||
|
|
const line = qs(".line");
|
||
|
|
line.style.bottom = `calc(100% - 20px)`;
|
||
|
|
let prevScrollY = window.scrollY;
|
||
|
|
let up, down;
|
||
|
|
let full = false;
|
||
|
|
let set = 0;
|
||
|
|
const targetY = window.innerHeight * 0.8;
|
||
|
|
|
||
|
|
function scrollHandler(e?: any) {
|
||
|
|
const { scrollY } = window;
|
||
|
|
up = scrollY < prevScrollY;
|
||
|
|
down = !up;
|
||
|
|
const timelineRect = timeline.getBoundingClientRect();
|
||
|
|
const lineRect = line.getBoundingClientRect(); // const lineHeight = lineRect.bottom - lineRect.top;
|
||
|
|
|
||
|
|
const dist = targetY - timelineRect.top;
|
||
|
|
console.log(dist);
|
||
|
|
|
||
|
|
if (down && !full) {
|
||
|
|
set = Math.max(set, dist);
|
||
|
|
line.style.bottom = `calc(100% - ${set}px)`;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (dist > timeline.offsetHeight + 50 && !full) {
|
||
|
|
full = true;
|
||
|
|
line.style.bottom = `-50px`;
|
||
|
|
}
|
||
|
|
|
||
|
|
sections.forEach((item: any) => {
|
||
|
|
// console.log(item);
|
||
|
|
const rect = item.getBoundingClientRect(); // console.log(rect);
|
||
|
|
|
||
|
|
if (rect.top + item.offsetHeight / 5 < targetY) {
|
||
|
|
item.classList.add("show-me");
|
||
|
|
}
|
||
|
|
}); // console.log(up, down);
|
||
|
|
|
||
|
|
prevScrollY = window.scrollY;
|
||
|
|
}
|
||
|
|
|
||
|
|
scrollHandler();
|
||
|
|
line.style.display = "block";
|
||
|
|
window.addEventListener("scroll", scrollHandler);
|