actions
/
mdBook
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(theme): Sticky header support in Safari (#572) 

Safari scrolls on body, not on the html tag. It also needs sticky to be prefixed.
This commit is contained in:
Sorin Davidoi 2018-01-23 14:13:11 +01:00 committed by Michael Bryan
parent b1b8ba4b98
commit bcfb37d964
3 changed files with 8 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/theme/book.css
View File

@ -144,6 +144,7 @@ table thead td {
max-width: 100%; max-width: 100%;
} }
#menu-bar { #menu-bar {
position: -webkit-sticky;
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 101; z-index: 101;

13
src/theme/book.js
View File

@ -510,26 +510,25 @@ function playpen_text(playpen) {
})(); })();
(function autoHideMenu() { (function autoHideMenu() {
var scrollingContainer = document.querySelector('html');
var menu = document.getElementById('menu-bar'); var menu = document.getElementById('menu-bar');
var previousScrollTop = scrollingContainer.scrollTop; var previousScrollTop = document.scrollingElement.scrollTop;
document.addEventListener('scroll', function () { document.addEventListener('scroll', function () {
if (menu.classList.contains('folded') && scrollingContainer.scrollTop < previousScrollTop) { if (menu.classList.contains('folded') && document.scrollingElement.scrollTop < previousScrollTop) {
menu.classList.remove('folded'); menu.classList.remove('folded');
} else if (!menu.classList.contains('folded') && scrollingContainer.scrollTop > previousScrollTop) { } else if (!menu.classList.contains('folded') && document.scrollingElement.scrollTop > previousScrollTop) {
menu.classList.add('folded'); menu.classList.add('folded');
} }
if (!menu.classList.contains('bordered') && scrollingContainer.scrollTop > 0) { if (!menu.classList.contains('bordered') && document.scrollingElement.scrollTop > 0) {
menu.classList.add('bordered'); menu.classList.add('bordered');
} }
if (menu.classList.contains('bordered') && scrollingContainer.scrollTop === 0) { if (menu.classList.contains('bordered') && document.scrollingElement.scrollTop === 0) {
menu.classList.remove('bordered'); menu.classList.remove('bordered');
} }
previousScrollTop = scrollingContainer.scrollTop; previousScrollTop = document.scrollingElement.scrollTop;
}, { passive: true }); }, { passive: true });
})(); })();

1
src/theme/stylus/menu.styl
View File

@ -1,4 +1,5 @@
#menu-bar { #menu-bar {
position: -webkit-sticky
position: sticky position: sticky
top: 0 top: 0
z-index: 101 z-index: 101