From e458389940c50d0e478f1680f1e3f79699c61283 Mon Sep 17 00:00:00 2001 From: Filipe Quintanilha Date: Wed, 7 Dec 2022 19:54:00 -0300 Subject: [PATCH] feat: torna o header fixo no scroll --- src/arquivos/js/app/components/FixedHeader.js | 51 +++++++------------ src/arquivos/sass/partials/_header.scss | 10 +++- .../filipequintanilha-home.html | 2 +- 3 files changed, 28 insertions(+), 35 deletions(-) diff --git a/src/arquivos/js/app/components/FixedHeader.js b/src/arquivos/js/app/components/FixedHeader.js index 0916421..75c0c8b 100644 --- a/src/arquivos/js/app/components/FixedHeader.js +++ b/src/arquivos/js/app/components/FixedHeader.js @@ -1,45 +1,30 @@ -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); - } + console.log(topScroll); - 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 1a4823e..bf80bc5 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/filipequintanilha-home.html b/src/template-pagina/filipequintanilha-home.html index 96c083e..b5ef7e8 100644 --- a/src/template-pagina/filipequintanilha-home.html +++ b/src/template-pagina/filipequintanilha-home.html @@ -20,7 +20,7 @@ -
+