Rafael_Sampaio_de_Oliveira/vtex-cms-template-atualizado-rafael-sampaio
1
0
Fork 0
forked from M3-Academy/vtex-cms-template-atualizado
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Torna o header fixo no scroll

Browse Source
This commit is contained in:
Rafael Sampaio de Oliveira 2022-12-08 17:30:59 -03:00
parent 82a3bed1eb
commit 18de98811a
3 changed files with 27 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
src/arquivos/js/app/components/FixedHeader.js
View File

@ -1,45 +1,28 @@
import { isSmallerThen768 } from "Helpers/MediasMatch"; import { isSmallerThen991 } from "Helpers/MediasMatch";
export default class FixedHeader { export default class FixedHeader {
constructor() { 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) { events() {
headerHeight = element.height(); $(document).scroll(this.fixHeader.bind(this));
scrollTop = $(document).scrollTop(); }
if (scrollTop > 1) { fixHeader() {
$("body").css("padding-top", headerHeight); const topScroll = $(document).scrollTop();
element.addClass("fixed");
if (timer) { if (topScroll > 200) {
window.clearTimeout(timer); this.pageHeader.addClass("is-fixed");
} } else {
this.pageHeader.removeClass("is-fixed");
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);
}
});
} }
} }

10
src/arquivos/sass/partials/_header.scss
View File

@ -1,5 +1,4 @@
.page-header { .page-header {
position: relative;
padding: 28px 0; padding: 28px 0;
background: $black-500; background: $black-500;
@ -7,6 +6,15 @@
padding: 18px 0 0; padding: 18px 0 0;
} }
@include mq(lg, min) {
position: sticky;
top: 0;
}
&.is-fixed {
background: rgba($black-500, 0.9);
}
&__wrapper { &__wrapper {
display: grid; display: grid;
grid-template-columns: 2fr 1fr 2fr; grid-template-columns: 2fr 1fr 2fr;

2
src/template-pagina/rafaelsampaio-home.html
View File

@ -19,7 +19,7 @@
<body> <body>
<vtex:template id="rafaelsampaio-header" /> <vtex:template id="rafaelsampaio-header" />
<main class="home"></main> <main class="home" style="height: 600px"></main>
<footer> <footer>
<vtex:template id="rafaelsampaio-footer-newsletter" /> <vtex:template id="rafaelsampaio-footer-newsletter" />