Torna o header fixo no scroll

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) {
+		if (!isSmallerThen991) {
-			this.fixedHeader();
+			this.selectors();
+			this.events();
 		}
 	}
 
-	fixedHeader() {
+	selectors() {
-		var lastScroll = 0;
+		this.pageHeader = $('.page-header');
-		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);
 	}
 
-				timer = window.setTimeout(function () {
+	events() {
-					if (
+		$(document).scroll(this.fixHeader.bind(this));
-						scrollTop > lastScroll &&
+	}
-						scrollTop > element.height() + 20
+
-					) {
+	fixHeader() {
-						element.addClass("fixed-hide");
+		const topScroll = $(document).scrollTop();
+		console.log(topScroll);
+
+		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);
-			}
-		});
 	}
 }

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;

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