rDrama/files/assets/js/mobile_navigation_bar.js

45 lines
1.3 KiB
JavaScript
Raw Normal View History

2022-12-04 15:40:32 +00:00
let prevScrollpos = window.pageYOffset;
window.onscroll = function () {
2022-12-04 15:40:32 +00:00
const currentScrollPos = window.pageYOffset;
2022-07-16 21:00:02 +00:00
2022-12-04 15:40:32 +00:00
const topBar = document.getElementById("fixed-bar-mobile");
2022-07-16 21:00:02 +00:00
2022-12-04 15:40:32 +00:00
const bottomBar = document.getElementById("mobile-bottom-navigation-bar");
2022-07-16 21:00:02 +00:00
2022-12-04 15:40:32 +00:00
const dropdown = document.getElementById("mobileSortDropdown");
2022-07-16 21:00:02 +00:00
2022-12-04 15:40:32 +00:00
const navbar = document.getElementById("navbar");
2022-07-16 21:00:02 +00:00
if (bottomBar != null) {
if (prevScrollpos > currentScrollPos && (window.innerHeight + currentScrollPos) < (document.body.offsetHeight - 65)) {
bottomBar.style.bottom = "0px";
2022-09-04 23:15:37 +00:00
}
2022-07-16 21:00:02 +00:00
else if (currentScrollPos <= 125 && (window.innerHeight + currentScrollPos) < (document.body.offsetHeight - 65)) {
bottomBar.style.bottom = "0px";
}
else if (prevScrollpos > currentScrollPos && (window.innerHeight + currentScrollPos) >= (document.body.offsetHeight - 65)) {
bottomBar.style.bottom = "-50px";
}
else {
bottomBar.style.bottom = "-50px";
}
}
if (topBar != null && dropdown != null) {
if (prevScrollpos > currentScrollPos) {
topBar.style.top = "48px";
navbar.classList.remove("shadow");
2022-09-04 23:15:37 +00:00
}
2022-07-16 21:00:02 +00:00
else if (currentScrollPos <= 125) {
topBar.style.top = "48px";
navbar.classList.remove("shadow");
}
else {
topBar.style.top = "-48px";
dropdown.classList.remove('show');
navbar.classList.add("shadow");
}
}
prevScrollpos = currentScrollPos;
2022-12-04 15:40:32 +00:00
}