diff --git a/static/skin/taskbar.css b/static/skin/taskbar.css index 3d1da25c1..ad8ceb0a5 100644 --- a/static/skin/taskbar.css +++ b/static/skin/taskbar.css @@ -1,11 +1,5 @@ #kiwixtoolbar { - position: fixed; padding: .5em; - left: 0; - right: 0; - top: 0; - z-index: 100; - background-position-y: 0; transition: 0.3s; width: 100%; box-sizing: border-box; @@ -135,10 +129,6 @@ a.suggest, a.suggest:visited, a.suggest:hover, a.suggest:active { column-count: 1 !important; } -body { - padding-top: calc(3em - 5px) !important; -} - @media(min-width:420px) { .kiwix_button_cont { display: inline-block !important; diff --git a/static/skin/viewer.js b/static/skin/viewer.js index d31445473..28f436e6b 100644 --- a/static/skin/viewer.js +++ b/static/skin/viewer.js @@ -281,7 +281,7 @@ function setupAutoHidingOfTheToolbar() { let didScroll = false; const kiwixToolBar = document.querySelector('#kiwixtoolbar'); - window.addEventListener('scroll', () => { + contentIframe.contentWindow.addEventListener('scroll', () => { didScroll = true; }); @@ -293,13 +293,16 @@ function setupAutoHidingOfTheToolbar() { }, 250); function hasScrolled() { - const st = document.documentElement.scrollTop || document.body.scrollTop; + const iframeDoc = contentIframe.contentDocument; + const st = iframeDoc.documentElement.scrollTop || iframeDoc.body.scrollTop; if (Math.abs(lastScrollTop - st) <= delta) return; if (st > lastScrollTop) { + kiwixToolBar.style.position = 'fixed'; kiwixToolBar.style.top = '-100%'; } else { + kiwixToolBar.style.position = 'static'; kiwixToolBar.style.top = '0'; } diff --git a/static/viewer.html b/static/viewer.html index c006bcc9b..15838a906 100644 --- a/static/viewer.html +++ b/static/viewer.html @@ -25,8 +25,8 @@ - - +
+
@@ -52,8 +52,8 @@
- - +
+