fraport/fradrive-old
Archived
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

navbar responsiveness with media queries instead of js

Browse Source
This commit is contained in:
Felix Hamann 2018-06-11 15:06:05 +02:00
parent 2063a32bb9
commit 54a0fa1252
2 changed files with 37 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
templates/widgets/navbar.julius
View File

@ -8,7 +8,6 @@
init(); init();
function init() { function init() {
nav.style.paddingLeft = document.body.getBoundingClientRect().width < 999 ? '90px' : '';
window.setTimeout(function () { window.setTimeout(function () {
nav.classList.add('navbar--animated'); nav.classList.add('navbar--animated');
}, 200); }, 200);
@ -19,7 +18,7 @@
// checks scroll direction and shows/hides navbar accordingly // checks scroll direction and shows/hides navbar accordingly
function checkScroll() { function checkScroll() {
var sticky = window.scrollY > 0; var sticky = window.scrollY > 0;
sticky = sticky && window.innerHeight < (document.scrollingElement.scrollHeight - 50); sticky = sticky && window.innerHeight < (document.scrollingElement.scrollHeight - 100);
nav.classList.toggle('navbar--sticky', sticky); nav.classList.toggle('navbar--sticky', sticky);
ticking = false; ticking = false;
} }
@ -32,10 +31,6 @@
} }
}, false); }, false);
} }
window.addEventListener('resize', function() {
nav.style.paddingLeft = document.body.getBoundingClientRect().width < 999 ? '90px' : '';
}, false);
} }

7
templates/widgets/navbar.lucius
View File

@ -21,6 +21,13 @@
box-shadow: 0 0 4px rgba(0, 0, 0, 0.2); box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
} }
@media (max-width: 999px) {
.navbar {
padding-left: 90px;
}
}
.navbar__logo { .navbar__logo {
transition: all .2s ease; transition: all .2s ease;