Radiquum/radiquum.github.io
1
0
Fork 0
mirror of https://github.com/Radiquum/radiquum.github.io.git synced 2025-04-17 23:04:33 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: header scroll with dependency on 1st block height

Browse source
This commit is contained in:
Kentai Radiquum 2024-09-15 00:49:39 +05:00
parent c610529e90
commit bde6476631
Signed by: Radiquum
GPG key ID: 858E8EE696525EED
1 changed files with 19 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
static/script.js
View file

@ -39,7 +39,6 @@ function updateTrack(newTrackName) {
UPDATE_INTERVAL = setInterval(() => { UPDATE_INTERVAL = setInterval(() => {
if (added < TrackNameLen) { if (added < TrackNameLen) {
trackName.innerHTML += newTrackName[added]; trackName.innerHTML += newTrackName[added];
console.log(added, TrackNameLen, newTrackName[added]);
added += 1; added += 1;
} }
@ -103,22 +102,36 @@ function getScrollPosition() {
return Math.floor(scrolled); return Math.floor(scrolled);
} }
function getBlockScrollPosition(block_id) {
const blockHeight = document.getElementById(block_id).clientHeight;
const fullPageHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
const restPageHeight = fullPageHeight - blockHeight;
const windowScroll = document.documentElement.scrollTop - restPageHeight;
const scrolled = (windowScroll / fullPageHeight) * 100;
if (0 < Math.floor(scrolled) ) {
return 0
} else {
return Math.floor(scrolled) * -1;
}
}
const header = document.getElementById("header"); const header = document.getElementById("header");
let last_Y_pos = 0; let last_Y_pos = 0;
let header_opacity = 0; let header_opacity = 0;
const HEADER_ACTIVATION_PERCENT = 30;
const HEADER_DEACTIVATION_PERCENT = 20;
window.onscroll = () => { window.onscroll = () => {
let scrollPosition = getScrollPosition(); let scrollPosition = getBlockScrollPosition('section_landing');
if (scrollPosition > HEADER_ACTIVATION_PERCENT) {
if (scrollPosition < 1) {
header.style.display = "none"; header.style.display = "none";
} else { } else {
header.style.display = "block"; header.style.display = "block";
} }
if (window.scrollY > last_Y_pos && scrollPosition > 1) { if (window.scrollY > last_Y_pos && scrollPosition < HEADER_ACTIVATION_PERCENT) {
header_opacity += 0.1; header_opacity += 0.1;
} else if (window.scrollY < last_Y_pos && scrollPosition < 1) } else if (window.scrollY < last_Y_pos && scrollPosition > HEADER_DEACTIVATION_PERCENT)
header_opacity -= 0.1; header_opacity -= 0.1;
last_Y_pos = window.scrollY; last_Y_pos = window.scrollY;