feat: torna o header fixo no scroll

This commit is contained in:
Cainã Milech 2022-12-07 19:32:03 -03:00
parent 6b82cc5fe7
commit f571f637d1
3 changed files with 28 additions and 79 deletions

View File

@ -1,45 +1,28 @@
import { isSmallerThen768 } from "Helpers/MediasMatch";
import { isSmallerThen991 } from "Helpers/MediasMatch";
export default class FixedHeader {
constructor() {
if (!isSmallerThen768) {
this.fixedHeader();
if (!isSmallerThen991) {
this.selectors();
this.events();
}
}
fixedHeader() {
var lastScroll = 0;
var timer, scrollTop, headerHeight;
var element = $("header.header");
$(document).scroll(function (e) {
headerHeight = element.height();
scrollTop = $(document).scrollTop();
if (scrollTop > 1) {
$("body").css("padding-top", headerHeight);
element.addClass("fixed");
if (timer) {
window.clearTimeout(timer);
selectors() {
this.pageHeader = $(".page-header");
}
timer = window.setTimeout(function () {
if (
scrollTop > lastScroll &&
scrollTop > element.height() + 20
) {
element.addClass("fixed-hide");
events() {
$(document).scroll(this.fixHeader.bind(this));
}
fixHeader() {
const topScroll = $(document).scrollTop();
if (topScroll > 200) {
this.pageHeader.addClass("is-fixed");
} else {
element.removeClass("fixed-hide");
this.pageHeader.removeClass("is-fixed");
}
lastScroll = $(document).scrollTop();
}, 50);
} else {
element.removeClass("fixed");
$("body").css("padding-top", 0);
}
});
}
}

View File

@ -1,5 +1,4 @@
.page-header {
position: relative;
padding: 28px 0;
background: $black-500;
@ -7,6 +6,16 @@
padding: 18px 0 0;
}
@include mq(lg, min) {
/*fixar no topo*/
position: sticky;
top: 0;
}
&.is-fixed {
background: rgba($black-500, 0.9);
}
&__wrapper {
display: grid;
grid-template-columns: 2fr 1fr 2fr;
@ -70,49 +79,6 @@
}
}
.minicart {
&__button {
position: relative;
padding: 0;
border: 0;
outline: 0;
background: transparent;
cursor: pointer;
.portal-totalizers-ref {
.title,
.amount-products,
.amount-items strong,
.amount-kits,
.total-cart {
display: none;
}
}
.cart-info {
margin: 0;
}
.amount-items-em {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 4px;
right: -4px;
width: 15px;
height: 15px;
border-radius: 50%;
font-style: normal;
font-weight: 700;
font-size: 9px;
line-height: 11px;
color: $white-500;
background: $blue-500;
}
}
}
&__search-box {
margin-top: 18px;
border-top: 1px solid $gray-500;

View File

@ -22,7 +22,7 @@
<vtex:template id="caina-header" />
<main class="home"></main>
<main class="home" style="height: 600px;"></main>
<footer>
<vtex:template id="caina-footer-newsletter" />