Radiquum/radiquum.github.io
1
0
Fork 0
mirror of https://github.com/Radiquum/radiquum.github.io.git synced 2025-04-09 09:44:34 +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

25
static/script.js
View file

@ -39,7 +39,6 @@ function updateTrack(newTrackName) {
UPDATE_INTERVAL = setInterval(() => {
if (added < TrackNameLen) {
trackName.innerHTML += newTrackName[added];
console.log(added, TrackNameLen, newTrackName[added]);
added += 1;
}
@ -103,22 +102,36 @@ function getScrollPosition() {
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");
let last_Y_pos = 0;
let header_opacity = 0;
const HEADER_ACTIVATION_PERCENT = 30;
const HEADER_DEACTIVATION_PERCENT = 20;
window.onscroll = () => {
let scrollPosition = getScrollPosition();
if (scrollPosition < 1) {
let scrollPosition = getBlockScrollPosition('section_landing');
if (scrollPosition > HEADER_ACTIVATION_PERCENT) {
header.style.display = "none";
} else {
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;
} else if (window.scrollY < last_Y_pos && scrollPosition < 1)
} else if (window.scrollY < last_Y_pos && scrollPosition > HEADER_DEACTIVATION_PERCENT)
header_opacity -= 0.1;
last_Y_pos = window.scrollY;