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

View File

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

View File

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

View File

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