feat: torna o header fixo no scroll
This commit is contained in:
parent
6b82cc5fe7
commit
f571f637d1
@ -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);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
@ -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;
|
||||
|
@ -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" />
|
||||
|
Loading…
Reference in New Issue
Block a user