diff --git a/static/skin/index.css b/static/skin/index.css
index 16b4dd96c..97b767132 100644
--- a/static/skin/index.css
+++ b/static/skin/index.css
@@ -27,6 +27,7 @@ body {
position: sticky;
top: 0;
z-index: 3;
+ transition: all 0.5s ease;
}
.kiwixHomeBody__results {
@@ -178,7 +179,7 @@ body {
}
#uiLanguageSelectorButton {
- margin: 16px 12px 0 0;
+ margin: 0 12px 0 0;
float: right;
}
@@ -467,7 +468,6 @@ body {
}
.feedLogo {
- margin: 16px 12px 0 0;
height: 30px;
float: right;
border-radius: 5px;
diff --git a/static/skin/index.js b/static/skin/index.js
index 52328eb54..506131703 100644
--- a/static/skin/index.js
+++ b/static/skin/index.js
@@ -18,6 +18,7 @@
params.delete('userlang');
let timer;
let languages = {};
+ let previousScrollTop = Infinity;
function updateFeedLink() {
const inputParams = new URLSearchParams(window.location.search);
@@ -453,6 +454,23 @@
}
}
+ function updateNavVisibilityState() {
+ const st = window.scrollY;
+ const enableAutoHiding = document.body.clientWidth < 590;
+ if ((Math.abs(previousScrollTop - st) <= 5) || !enableAutoHiding)
+ return;
+ const kiwixNav = document.querySelector('.kiwixNav');
+ if (st > previousScrollTop) {
+ kiwixNav.style.position = 'fixed';
+ kiwixNav.style.top = '-100%';
+ document.querySelector('.kiwixHomeBody').style.width = '100%';
+ } else {
+ kiwixNav.style.position = 'sticky';
+ kiwixNav.style.top = '0';
+ }
+ previousScrollTop = st;
+ }
+
window.addEventListener('resize', (event) => {
if (timer) {clearTimeout(timer)}
timer = setTimeout(() => {
@@ -531,6 +549,7 @@
}
updateFeedLink();
setCookie(filterCookieName, params.toString(), oneDayDelta);
+ setInterval(updateNavVisibilityState, 250);
};
// required by i18n.js:setUserLanguage()
diff --git a/static/templates/index.html b/static/templates/index.html
index 6bbe6d126..15aff898d 100644
--- a/static/templates/index.html
+++ b/static/templates/index.html
@@ -44,26 +44,26 @@
-
- 
-
-
-
-
+
+
+
+
+
+