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

65
templates/widgets/navbar.julius
View File

@ -1,47 +1,42 @@
(function() { (function () {
'use strict'; 'use strict';
window.utils = window.utils || {}; window.utils = window.utils || {};
window.utils.stickynav = function(nav) { window.utils.stickynav = function (nav) {
var ticking = false; var ticking = false;
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); checkScroll();
checkScroll(); addListener();
addListener(); }
}
// 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;
} }
function addListener() { function addListener() {
window.addEventListener('scroll', function(e) { window.addEventListener('scroll', function (e) {
if (!ticking) { if (!ticking) {
window.requestAnimationFrame(checkScroll); window.requestAnimationFrame(checkScroll);
ticking = true; ticking = true;
} }
}, false); }, false);
} }
}
window.addEventListener('resize', function() {
nav.style.paddingLeft = document.body.getBoundingClientRect().width < 999 ? '90px' : '';
}, false);
}
})(); })();
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function () {
utils.stickynav(document.querySelector('.js-sticky-navbar')); utils.stickynav(document.querySelector('.js-sticky-navbar'));

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;