This commit is contained in:
杜恒 2021-06-16 13:25:09 +08:00
parent c52173b24c
commit 98d570bf8b
4 changed files with 36 additions and 24 deletions

File diff suppressed because one or more lines are too long

View File

@ -53,6 +53,12 @@
background: var(--background); background: var(--background);
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
transition: top 0.35s; transition: top 0.35s;
&.active {
top: -60px;
.joe_header__below {
border-top: none;
}
}
&__above { &__above {
position: relative; position: relative;
z-index: 999; z-index: 999;
@ -289,9 +295,6 @@
position: relative; position: relative;
border-top: 1px solid var(--classC); border-top: 1px solid var(--classC);
height: 45px; height: 45px;
&.active {
border-top-color: transparent;
}
&-class { &-class {
display: flex; display: flex;
.item { .item {

View File

@ -522,25 +522,34 @@ document.addEventListener('DOMContentLoaded', () => {
} }
} }
/* 头部滚动 */
{ {
if (!window.Joe.IS_MOBILE) {
let flag = true;
const handleHeader = diffY => { const handleHeader = diffY => {
if (window.pageYOffset >= $('.joe_header').height() && diffY <= 0) { if (window.pageYOffset >= $('.joe_header').height() && diffY <= 0) {
$('.joe_header__below').addClass('active'); if (flag) return;
$('.joe_header').css('top', `-${$('.joe_header__above').height()}px`); $('.joe_header').addClass('active');
$('.joe_aside .joe_aside__item:last-child').css('top', $('.joe_header').height() - $('.joe_header__above').height() + 15); $('.joe_aside .joe_aside__item:last-child').css('top', $('.joe_header').height() - 60 + 15);
flag = true;
} else { } else {
$('.joe_header__below').removeClass('active'); if (!flag) return;
$('.joe_header').css('top', 0); $('.joe_header').removeClass('active');
$('.joe_aside .joe_aside__item:last-child').css('top', $('.joe_header').height() + 15); $('.joe_aside .joe_aside__item:last-child').css('top', $('.joe_header').height() + 15);
flag = false;
} }
}; };
let Y = window.pageYOffset; let Y = window.pageYOffset;
handleHeader(Y); handleHeader(Y);
$(document).on('scroll', function () { let _last = Date.now();
const diffY = Y - window.pageYOffset; document.addEventListener('scroll', () => {
if (window.requestAnimationFrame) requestAnimationFrame(handleHeader.bind(null, diffY)); let _now = Date.now();
else handleHeader(diffY); if (_now - _last > 15) {
handleHeader(Y - window.pageYOffset);
Y = window.pageYOffset; Y = window.pageYOffset;
}
_last = _now;
}); });
} }
}
}); });

File diff suppressed because one or more lines are too long