diff --git a/templates/widgets/navbar.julius b/templates/widgets/navbar.julius index 4991dec3f..d0e06d57d 100644 --- a/templates/widgets/navbar.julius +++ b/templates/widgets/navbar.julius @@ -1,47 +1,42 @@ - (function() { - 'use strict'; +(function () { + 'use strict'; - window.utils = window.utils || {}; + window.utils = window.utils || {}; - window.utils.stickynav = function(nav) { - var ticking = false; + window.utils.stickynav = function (nav) { + var ticking = false; - init(); - function init() { - nav.style.paddingLeft = document.body.getBoundingClientRect().width < 999 ? '90px' : ''; - window.setTimeout(function() { - nav.classList.add('navbar--animated'); - }, 200); - checkScroll(); - addListener(); - } + init(); + function init() { + window.setTimeout(function () { + nav.classList.add('navbar--animated'); + }, 200); + checkScroll(); + addListener(); + } - // checks scroll direction and shows/hides navbar accordingly - function checkScroll() { - var sticky = window.scrollY > 0; - sticky = sticky && window.innerHeight < (document.scrollingElement.scrollHeight - 50); - nav.classList.toggle('navbar--sticky', sticky); - ticking = false; - } + // checks scroll direction and shows/hides navbar accordingly + function checkScroll() { + var sticky = window.scrollY > 0; + sticky = sticky && window.innerHeight < (document.scrollingElement.scrollHeight - 100); + nav.classList.toggle('navbar--sticky', sticky); + ticking = false; + } - function addListener() { - window.addEventListener('scroll', function(e) { - if (!ticking) { - window.requestAnimationFrame(checkScroll); - ticking = true; - } - }, false); - } - - window.addEventListener('resize', function() { - nav.style.paddingLeft = document.body.getBoundingClientRect().width < 999 ? '90px' : ''; - }, false); - } + function addListener() { + window.addEventListener('scroll', function (e) { + if (!ticking) { + window.requestAnimationFrame(checkScroll); + ticking = true; + } + }, false); + } + } })(); -document.addEventListener('DOMContentLoaded', function() { +document.addEventListener('DOMContentLoaded', function () { utils.stickynav(document.querySelector('.js-sticky-navbar')); diff --git a/templates/widgets/navbar.lucius b/templates/widgets/navbar.lucius index fd38cf6a0..1097733f5 100644 --- a/templates/widgets/navbar.lucius +++ b/templates/widgets/navbar.lucius @@ -21,6 +21,13 @@ box-shadow: 0 0 4px rgba(0, 0, 0, 0.2); } +@media (max-width: 999px) { + + .navbar { + padding-left: 90px; + } +} + .navbar__logo { transition: all .2s ease;