feat: torna o header fixo no scroll

src/arquivos/js/app/components/FixedHeader.js

@@ -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");
+	selectors() {
+		this.pageHeader = $(".page-header");
+	}
 
-		$(document).scroll(function (e) {
-			headerHeight = element.height();
-			scrollTop = $(document).scrollTop();
+	events() {
+		$(document).scroll(this.fixHeader.bind(this));
+	}
 
-			if (scrollTop > 1) {
-				$("body").css("padding-top", headerHeight);
-				element.addClass("fixed");
+	fixHeader() {
+		const topScroll = $(document).scrollTop();
 
-				if (timer) {
-					window.clearTimeout(timer);
-				}
-
-				timer = window.setTimeout(function () {
-					if (
-						scrollTop > lastScroll &&
-						scrollTop > element.height() + 20
-					) {
-						element.addClass("fixed-hide");
-					} else {
-						element.removeClass("fixed-hide");
-					}
-
-					lastScroll = $(document).scrollTop();
-				}, 50);
-			} else {
-				element.removeClass("fixed");
-				$("body").css("padding-top", 0);
-			}
-		});
+		if (topScroll > 200) {
+			this.pageHeader.addClass("is-fixed");
+		} else {
+			this.pageHeader.removeClass("is-fixed");
+		}
 	}
 }

src/arquivos/sass/partials/_header.scss

@@ -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;

src/template-pagina/caina-home.html

@@ -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" />