Skip to content

Instantly share code, notes, and snippets.

@LucasCalazans

LucasCalazans/default.xml

Last active June 19, 2018 15:02
Show Gist options
  • Save LucasCalazans/b1e05e15a26bea7ab12951eb78f8c963 to your computer and use it in GitHub Desktop.
Save LucasCalazans/b1e05e15a26bea7ab12951eb78f8c963 to your computer and use it in GitHub Desktop.
Download ZIP
Add "sticky-header" class to body
Raw
default.xml
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<link src="js/sticky-header.js" type="application/javascript" />
</head>
</page>
Raw
sticky-header.js
document.addEventListener('DOMContentLoaded', function() {
if(document.body.className.indexOf('checkout-index-index') >= 0) return;
var headerContainer = document.getElementsByClassName('page-header')[0];
var checkStickyHeader = function() {
if(!headerContainer || window.innerWidth < 768) return;
var headerRect = headerContainer.getBoundingClientRect();
var headerContainerTop = headerContainer.offsetTop + headerRect.height;
if(window.scrollY <= headerContainerTop) {
document.body.style.paddingTop = 'initial';
document.body.classList.remove("sticky-header");
return;
}
document.body.classList.add("sticky-header");
document.body.style.paddingTop = headerContainerTop + 'px';
};
window.addEventListener('scroll', checkStickyHeader);
window.addEventListener('resize', function() {
if(window.innerWidth >= 768) return;
document.body.style.paddingTop = 'initial';
document.body.classList.remove("sticky-header");
});
checkStickyHeader();
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment