diff --git a/src/arquivos/js/app/components/FixedHeader.js b/src/arquivos/js/app/components/FixedHeader.js
index 0916421..42ef2a1 100644
--- a/src/arquivos/js/app/components/FixedHeader.js
+++ b/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");
+ }
}
}
diff --git a/src/arquivos/sass/partials/_header.scss b/src/arquivos/sass/partials/_header.scss
index 65f9faf..52e3f59 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,15 @@
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/rafaelsampaio-home.html b/src/template-pagina/rafaelsampaio-home.html
index f153f9a..8791d73 100644
--- a/src/template-pagina/rafaelsampaio-home.html
+++ b/src/template-pagina/rafaelsampaio-home.html
@@ -19,7 +19,7 @@
-
+