Radiquum/radiquum.github.io
1
0
Fork 0
mirror of https://github.com/Radiquum/radiquum.github.io.git synced 2025-05-03 19:39:34 +05:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor: better header scroll handling

Browse source
This commit is contained in:
Kentai Radiquum 2024-09-16 12:19:24 +05:00
parent 6c0f477436
commit 2c9fb22de2
Signed by: Radiquum
GPG key ID: 858E8EE696525EED
3 changed files with 39 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

30
static/script.js
View file

@ -7,8 +7,8 @@ const IMAGE_ANIMATION_DELAY = 1000;
const IMAGE_TRANSITION_DELAY = 1000;
// Header percentages
const HEADER_ACTIVATION_PERCENT = 30;
const HEADER_DEACTIVATION_PERCENT = 20;
const HEADER_ACTIVATION_PERCENT = 0.4;
const HEADER_DEACTIVATION_PERCENT = 0.8;
// THIS IS NOT CONSTANTS, BUT A GLOBAL VAR FOR TIMERS IN SONG NAME CHANGE!!!
let DELETE_INTERVAL = null;
@ -95,36 +95,24 @@ async function updatePlayingTrack() {
});
}
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;
window.onscroll = () => {
let scrollPosition = getBlockScrollPosition('section_landing');
if (scrollPosition > HEADER_ACTIVATION_PERCENT) {
let landingBlock = document.getElementById("section_landing").clientHeight;
if (window.scrollY < (landingBlock * HEADER_ACTIVATION_PERCENT)) {
header.style.display = "none";
} else {
header.style.display = "block";
}
if (window.scrollY > last_Y_pos && scrollPosition < HEADER_ACTIVATION_PERCENT) {
if (window.scrollY > last_Y_pos && window.scrollY > (landingBlock * HEADER_ACTIVATION_PERCENT)) {
header_opacity += 0.1;
} else if (window.scrollY < last_Y_pos && scrollPosition > HEADER_DEACTIVATION_PERCENT)
} else if (window.scrollY < last_Y_pos && window.scrollY < (landingBlock * HEADER_DEACTIVATION_PERCENT)) {
header_opacity -= 0.1;
last_Y_pos = window.scrollY;
}
if (header_opacity > 1) {
header_opacity = 1;
@ -132,6 +120,8 @@ window.onscroll = () => {
header_opacity = 0;
}
last_Y_pos = window.scrollY;
header.style.setProperty("--header-opacity", `${header_opacity.toFixed(2)}`);
};

24
static/tailwind.css
View file

@ -1239,6 +1239,14 @@ body {
margin-top: -248px;
}
.xl\:max-h-\[30vh\] {
max-height: 30vh;
}
.xl\:max-h-\[40vh\] {
max-height: 40vh;
}
.xl\:gap-4 {
gap: 1rem;
}
@ -1289,6 +1297,14 @@ body {
margin-top: -0px;
}
.\32xl\:h-screen {
height: 100vh;
}
.\32xl\:max-h-\[60vh\] {
max-height: 60vh;
}
.\32xl\:w-\[512px\] {
width: 512px;
}
@ -1297,6 +1313,14 @@ body {
width: 64px;
}
.\32xl\:w-\[300px\] {
width: 300px;
}
.\32xl\:flex-row {
flex-direction: row;
}
.\32xl\:text-4xl {
font-size: 2.25rem;
line-height: 2.5rem;