Elgato_dark/fleet
1
0
Fork 0
mirror of https://github.com/fleetdm/fleet synced 2026-05-23 17:08:53 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 83

Website: Update sticky header behavior (#8115)

Browse source 
* Update sticky header behavior

* update sticky header function
This commit is contained in:
Eric 2022-10-06 18:49:11 -05:00 committed by GitHub
parent 97155238c7
commit 8f304f8d0e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 5 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
website/views/layouts/layout.ejs vendored
View file

@ -360,37 +360,16 @@
<script>
var lastScrollTop = 0;
var header = document.querySelector('.header')
var ctaBanner = document.querySelector('[purpose="header-report-cta"]')
window.addEventListener('scroll', windowScrolled)
window.addEventListener('scroll', windowScrolled);
function windowScrolled() {
var scrollTop = window.pageYOffset || document.documentElement.scrollTop
var fleetLogo = header.querySelector('img')
var hamburgerMenuIcon = header.querySelector('.btn.btn-link > img')
let ctaBannerHeightOrTopOfPage = ctaBanner ? ctaBanner.clientHeight : 0;
if(scrollTop < ctaBannerHeightOrTopOfPage && header.classList.contains('homepage-header')) {
if (ctaBanner) {
header.classList.add('homepage-header-top')
}
header.classList.remove('sticky')
fleetLogo.src = '/images/logo-white-162x92@2x.png'
hamburgerMenuIcon.src = '/images/icon-hamburger-16x14@2x.png'
return;
}
let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
if(scrollTop > lastScrollTop && scrollTop > window.innerHeight * 1.5) {
header.classList.add('translate-y-0');
} else {
// If the header is touching the top of the viewport
if(header.getBoundingClientRect().y <= 0) {
header.classList.remove('homepage-header-top')
header.classList.add('sticky')
fleetLogo.src = '/images/logo-blue-162x92@2x.png'
hamburgerMenuIcon.src="/images/icon-hamburger-blue-16x14@2x.png"
}
lastScrollTop = scrollTop;
} else if(scrollTop < lastScrollTop - 60) {
header.classList.remove('translate-y-0');
lastScrollTop = scrollTop;
}
lastScrollTop = scrollTop;
}
</script>