mirror of
https://github.com/empayre/fleet.git
synced 2024-11-06 08:55:24 +00:00
Make top banner not sticky (#6797)
* feat: Make top banner not sticky * fix: issue with transition on page load and scroll * fix: add semi colon to less to resolve linting issues * fix: commas issue in less * fix: space between header and cta-banner * fix: resolve scrolling weird animation and hero section jumps * fix: responseive top value set * feat: don't animate background color * feat: add transition for the top property of the header * update sticky header function and styles Co-authored-by: Eric <eashaw@sailsjs.com>
This commit is contained in:
Kelvin Oghenerhoro Omereshone
GitHub
parent
56ea9ee1b3
commit
71952c9b0a
87
website/assets/styles/layout.less
vendored
87
website/assets/styles/layout.less
vendored
@ -15,10 +15,41 @@ html, body {
|
||||
position: relative;
|
||||
padding-bottom: @footer-height;
|
||||
}
|
||||
.homepage-cta-banner {
|
||||
background-color: #FFF;
|
||||
color: #000;
|
||||
|
||||
a {
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
// Apply this margin when there is a CTA banner on the homepage
|
||||
.homepage-cta-banner + .homepage-header-top {
|
||||
top: 52px;
|
||||
}
|
||||
.non-homepage-cta-banner {
|
||||
background-color: @core-fleet-black;
|
||||
color: #FFF;
|
||||
a {
|
||||
color: #FFF;
|
||||
}
|
||||
}
|
||||
[purpose='header-report-cta'] {
|
||||
p {
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
}
|
||||
a {
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
font-weight: 700;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
[purpose='page-header'] {
|
||||
// rules for sticky nav transitions
|
||||
transition-property: all;
|
||||
transition-property: background-color, transform, bottom;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 500ms;
|
||||
|
||||
@ -106,28 +137,18 @@ html, body {
|
||||
}
|
||||
}
|
||||
}
|
||||
[purpose='header-report-cta'] {
|
||||
p {
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
}
|
||||
a {
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
font-weight: 700;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
} // Homepage header styles
|
||||
&.homepage-header {
|
||||
z-index: 9999;
|
||||
position: fixed;
|
||||
color: #ffffff;
|
||||
position: absolute;
|
||||
color: #fff;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
&.sticky {
|
||||
position: fixed;
|
||||
background-color: #fff;
|
||||
border-color: transparent;
|
||||
color: #192147;
|
||||
|
||||
.btn.btn-link {
|
||||
@ -154,14 +175,6 @@ html, body {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
[purpose='header-report-cta'] {
|
||||
background-color: #FFF;
|
||||
color: #000;
|
||||
|
||||
a {
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
} // Non-homepage header styles
|
||||
&.header {
|
||||
left: 0;
|
||||
@ -193,13 +206,6 @@ html, body {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
[purpose='header-report-cta'] {
|
||||
background-color: @core-fleet-black;
|
||||
color: #FFF;
|
||||
a {
|
||||
color: #FFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Footer styles
|
||||
@ -254,6 +260,11 @@ body.detected-mobile {
|
||||
// devices (like the iPad) as well as handset devices (like the iPhone).
|
||||
// …
|
||||
}
|
||||
@media (max-width: 992px) {
|
||||
.homepage-cta-banner+.homepage-header-top {
|
||||
top: 72px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
[purpose='page-wrap'] {
|
||||
@ -264,7 +275,11 @@ body.detected-mobile {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 605px) {
|
||||
.homepage-cta-banner + .homepage-header-top {
|
||||
top: 92px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 575px) {
|
||||
[purpose='page-wrap'] {
|
||||
padding-bottom: 371px;
|
||||
@ -296,6 +311,16 @@ body.detected-mobile {
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (max-width: 393px) {
|
||||
.homepage-cta-banner + .homepage-header-top {
|
||||
top: 112px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 330px) {
|
||||
.homepage-cta-banner + .homepage-header-top {
|
||||
top: 132px;
|
||||
}
|
||||
}
|
||||
|
||||
// Some utilities for the sticky nav behaviour
|
||||
.translate-y-0 {
|
||||
|
||||
22
website/views/layouts/layout.ejs
vendored
22
website/views/layouts/layout.ejs
vendored
@ -111,14 +111,14 @@
|
||||
<!--STYLES END-->
|
||||
</head>
|
||||
<body>
|
||||
<div purpose="page-wrap">
|
||||
<div class="<%= isHomepage ? 'homepage-header' : 'header' %>" purpose="page-header">
|
||||
<div purpose="header-report-cta" class="<%= headerCTAHidden ? 'd-none' : 'd-flex' %> flex-row justify-content-center align-items-md-center">
|
||||
<div purpose="page-wrap" dat>
|
||||
<div purpose="header-report-cta" class="<%= isHomepage ? 'homepage-cta-banner' : 'non-homepage-cta-banner' %> <%= headerCTAHidden ? 'd-none' : 'd-flex' %> flex-row justify-content-center align-items-md-center">
|
||||
<div class="mb-0 d-flex flex-lg-row flex-column justify-content-center py-3 px-2">
|
||||
<p class="text-center pr-1 mb-0">We surveyed 200+ security practitioners to discover the state of device management in 2022. </p>
|
||||
<a class="mb-0 d-block text-center d-lg-inline text-lg-left" href="/reports/state-of-device-management">Click here to learn about their struggles and best practices.</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="<%= isHomepage ? 'homepage-header' : 'header' %> <%= !headerCTAHidden ? 'homepage-header-top' : null %>" purpose="page-header">
|
||||
<div style="max-width: 1248px; height: 94px;" class="container-fluid d-flex justify-content-between align-items-center pt-3 pb-3 px-3 px-md-4">
|
||||
<a href="/" style="max-width: 118px;">
|
||||
<% /* The homepage-header on the homepage has a white fleet logo */ %>
|
||||
@ -360,13 +360,18 @@
|
||||
<script>
|
||||
var lastScrollTop = 0;
|
||||
var header = document.querySelector('.header') || document.querySelector('.homepage-header')
|
||||
var ctaBanner = document.querySelector('[purpose="header-report-cta"]')
|
||||
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')
|
||||
if(scrollTop == 0 && header.classList.contains('homepage-header')) {
|
||||
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'
|
||||
@ -375,12 +380,15 @@
|
||||
if(scrollTop > lastScrollTop && scrollTop > window.innerHeight * 1.5) {
|
||||
header.classList.add('translate-y-0');
|
||||
} else {
|
||||
if(header.classList.contains('homepage-header') && scrollTop > 16) {
|
||||
// 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"
|
||||
}
|
||||
header.classList.remove('translate-y-0');
|
||||
header.classList.remove('translate-y-0');
|
||||
}
|
||||
lastScrollTop = scrollTop;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user