BernardoWaldhelm/vtex-home-page
1
0
Fork 0
forked from M3-Academy/vtex-cms-template-atualizado
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Adicionando function de header fixo com scroll

Browse Source
This commit is contained in:
Bernardo Cunha Ernani Waldhelm 2022-12-08 09:58:43 -03:00
parent f2425407ea
commit bd6abf0b09
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 {
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 topScrool = $(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 (topScrool > 200) {
this.pageHeader.addClass("isFixed");
} else {
this.pageHeader.removeClass("isFixed");
}
}
}

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

@ -1,12 +1,20 @@
.page-header {
position: relative;
background: $black;
padding: 28px 0;
@include mq(lg, min) {
position: sticky;
top: 0;
}
@include mq(lg, max) { //trazendo do _mixing.scss
padding: 18px 0 0;
}
&.isFixed {
background: rgba($black, 0.9);
}
&__wrapper {
display: grid;

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

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