From ecda74b749d62010b55cb158407cad6db42189e4 Mon Sep 17 00:00:00 2001
From: Andrea Matsunaga <andreamizuno@gmail.com>
Date: Sat, 10 Dec 2022 23:51:36 -0300
Subject: [PATCH] Torna o header fixo no scroll

---
 src/arquivos/js/app/components/FixedHeader.js | 52 +++++++------------
 src/arquivos/sass/partials/_header.scss       | 11 +++-
 src/template-pagina/andrea-home.html          |  2 +-
 3 files changed, 29 insertions(+), 36 deletions(-)

diff --git a/src/arquivos/js/app/components/FixedHeader.js b/src/arquivos/js/app/components/FixedHeader.js
index 0916421..91c5efb 100644
--- a/src/arquivos/js/app/components/FixedHeader.js
+++ b/src/arquivos/js/app/components/FixedHeader.js
@@ -1,45 +1,29 @@
-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();
+		console.log(topScroll);
 
-				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');
+		}
 	}
 }
diff --git a/src/arquivos/sass/partials/_header.scss b/src/arquivos/sass/partials/_header.scss
index 7c57dc4..efa8939 100644
--- a/src/arquivos/sass/partials/_header.scss
+++ b/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) {
+		position: sticky;
+		top: 0;
+	}
+
+	&.is-fixed {
+		background: rgba($black-500, 0.9);
+
+	}
+
 	&__wrapper {
 		display: grid;
 		grid-template-columns: 2fr 1fr 2fr;
diff --git a/src/template-pagina/andrea-home.html b/src/template-pagina/andrea-home.html
index 475c7fc..5043a81 100644
--- a/src/template-pagina/andrea-home.html
+++ b/src/template-pagina/andrea-home.html
@@ -20,7 +20,7 @@
 
 		<vtex:template id="andrea-header" />
 
-		<main class="home"></main>
+		<main class="home" style="height: 600px"></main>
 
 		<footer>
 			<vtex:template id="andrea-footer-newsletter" />