daudix/website
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

feat: Smart navigation bar

Browse source
This commit is contained in:
David Lapshin 2023-08-09 18:58:05 +03:00
parent df007058dd
commit f2301fd600
Signed by: daudix
GPG key ID: 93ECF15D3053D81C
2 changed files with 67 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

86
_includes/head.html
View file

@ -26,45 +26,71 @@
<!-- Plausible -->
<script defer data-domain="daudix-ufo.codeberg.page" src="https://analytics.projectsegfau.lt/js/script.js"></script>
<!-- Navigation -->
<script>
var scrolling = false;
document.addEventListener("DOMContentLoaded", function () {
const nav = document.querySelector(".nav");
const supportPageOffset = window.pageXOffset !== undefined;
const isCSS1Compat = (document.compatMode || "") === "CSS1Compat";
window.onscroll = function () {
if (!scrolling) {
scrolling = true;
setTimeout(function () {
scrollFunction();
scrolling = false;
}, 100);
}
};
let previousScrollPosition = 0;
function scrollFunction() {
var screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
if (screenWidth < 650) {
return;
}
const isScrollingDown = () => {
const scrolledPosition = supportPageOffset
? window.pageYOffset
: isCSS1Compat
? document.documentElement.scrollTop
: document.body.scrollTop;
var navContainers = document.querySelectorAll(".nav-container");
var navElements = document.querySelectorAll(".nav");
return scrolledPosition > previousScrollPosition;
};
for (var i = 0; i < navContainers.length; i++) {
if (document.documentElement.scrollTop > 20) {
navContainers[i].style.margin = "0.5rem auto";
const handleNavScroll = () => {
const scrolledPosition = supportPageOffset
? window.pageYOffset
: isCSS1Compat
? document.documentElement.scrollTop
: document.body.scrollTop;
if (isScrollingDown() && !nav.contains(document.activeElement)) {
nav.classList.add("scroll-down");
nav.classList.remove("scroll-up");
} else {
navContainers[i].style.margin = "1rem auto";
nav.classList.add("scroll-up");
nav.classList.remove("scroll-down");
}
}
for (var i = 0; i < navElements.length; i++) {
if (document.documentElement.scrollTop > 20) {
navElements[i].style.backdropFilter = "blur(32px) saturate(180%)";
navElements[i].style.boxShadow = "0 0 0 1px rgba(0, 0, 0, 0.03), 0 1px 3px 1px rgba(0, 0, 0, 0.07), 0 2px 6px 2px rgba(0, 0, 0, 0.03)";
// Apply effects based on the scrolled position
if (scrolledPosition > 20) {
nav.style.backdropFilter = "blur(32px) saturate(180%)";
nav.style.boxShadow = "0 0 0 1px rgba(0, 0, 0, 0.03), 0 1px 3px 1px rgba(0, 0, 0, 0.07), 0 2px 6px 2px rgba(0, 0, 0, 0.03)";
} else {
navElements[i].style.backdropFilter = "none";
navElements[i].style.boxShadow = "none";
nav.style.backdropFilter = "none";
nav.style.boxShadow = "none";
}
}
}
previousScrollPosition = scrolledPosition;
};
var throttleTimer;
const throttle = (callback, time) => {
if (throttleTimer) return;
throttleTimer = true;
setTimeout(() => {
callback();
throttleTimer = false;
}, time);
};
const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
window.addEventListener("scroll", () => {
if (mediaQuery && !mediaQuery.matches) {
throttle(handleNavScroll, 100);
}
});
});
</script>
</head>

21
style.css
View file

@ -987,6 +987,15 @@ nav {
z-index: 1;
}
nav.scroll-up,
nav:focus-within {
top: 0;
}
nav.scroll-down {
top: -100%;
}
.nav-container {
display: block;
width: 80%;
@ -1001,14 +1010,13 @@ nav {
/* box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.03), 0 1px 3px 1px rgba(0, 0, 0, 0.07),
0 2px 6px 2px rgba(0, 0, 0, 0.03); */
overflow: auto;
transition: 200ms;
transition: top 400ms, backdrop-filter 200ms, box-shadow 200ms;
}
.nav-container {
margin: 1rem auto;
margin: 0.5rem auto;
position: relative;
text-align: center;
transition: 200ms;
}
.nav-title {
@ -1075,10 +1083,3 @@ nav {
right: 0;
}
}
@media only screen and (max-device-width: 650px) {
/*mobile*/
nav {
position: relative;
}
}