Jonas_Jones/multimodal_parliament_explorer_05_1
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

added scroll animation to header

Browse source
This commit is contained in:
Jonas Werner 2025-03-21 17:45:31 +01:00
parent 1189f0e5a8
commit 8547915658
2 changed files with 23 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/main/resources/static/index.css
View file

@ -29,6 +29,7 @@ header {
right: 0;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
border-bottom: 5px solid #a8170d;
transition: top 0.3s ease;
}
header h1 {

23
src/main/resources/templates/header.ftl
View file

@ -1,4 +1,4 @@
<header>
<header id="header">
<div class="hamburger-menu">
<div class="hamburger-line line-1"></div>
<div class="hamburger-line line-2"></div>
@ -32,8 +32,29 @@
} else {
navLinks.style.display = 'none'; // Hide the nav-links
navLinks.classList.remove('slide-in'); // Reset the animation
navLinks.style.top = '100px'; // Move the nav-links down
navLinks.style.transition = 'top 0.3s ease-in-out'; // Add a transition effect
}
});
let prevScrollPos = window.pageYOffset;
window.onscroll = function() {
let currentScrollPos = window.pageYOffset;
const navLinks = document.querySelector('.nav-links');
navLinks.style.transition = 'top 0.2s ease-in-out'; // Add a transition effect
if (prevScrollPos > currentScrollPos) {
document.getElementById("header").style.top = "0";
navLinks.style.top = '5px'; // Move the nav-links up
} else {
document.getElementById("header").style.top = "-100px";
navLinks.style.top = '100px'; // Move the nav-links up
}
prevScrollPos = currentScrollPos; // Update the previous scroll position
};
</script>
<style>