更新
This commit is contained in:
parent
c52173b24c
commit
98d570bf8b
2
assets/css/joe.global.min.css
vendored
2
assets/css/joe.global.min.css
vendored
File diff suppressed because one or more lines are too long
@ -53,6 +53,12 @@
|
||||
background: var(--background);
|
||||
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
|
||||
transition: top 0.35s;
|
||||
&.active {
|
||||
top: -60px;
|
||||
.joe_header__below {
|
||||
border-top: none;
|
||||
}
|
||||
}
|
||||
&__above {
|
||||
position: relative;
|
||||
z-index: 999;
|
||||
@ -289,9 +295,6 @@
|
||||
position: relative;
|
||||
border-top: 1px solid var(--classC);
|
||||
height: 45px;
|
||||
&.active {
|
||||
border-top-color: transparent;
|
||||
}
|
||||
&-class {
|
||||
display: flex;
|
||||
.item {
|
||||
|
@ -522,25 +522,34 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
}
|
||||
}
|
||||
|
||||
/* 头部滚动 */
|
||||
{
|
||||
const handleHeader = diffY => {
|
||||
if (window.pageYOffset >= $('.joe_header').height() && diffY <= 0) {
|
||||
$('.joe_header__below').addClass('active');
|
||||
$('.joe_header').css('top', `-${$('.joe_header__above').height()}px`);
|
||||
$('.joe_aside .joe_aside__item:last-child').css('top', $('.joe_header').height() - $('.joe_header__above').height() + 15);
|
||||
} else {
|
||||
$('.joe_header__below').removeClass('active');
|
||||
$('.joe_header').css('top', 0);
|
||||
$('.joe_aside .joe_aside__item:last-child').css('top', $('.joe_header').height() + 15);
|
||||
}
|
||||
};
|
||||
let Y = window.pageYOffset;
|
||||
handleHeader(Y);
|
||||
$(document).on('scroll', function () {
|
||||
const diffY = Y - window.pageYOffset;
|
||||
if (window.requestAnimationFrame) requestAnimationFrame(handleHeader.bind(null, diffY));
|
||||
else handleHeader(diffY);
|
||||
Y = window.pageYOffset;
|
||||
});
|
||||
if (!window.Joe.IS_MOBILE) {
|
||||
let flag = true;
|
||||
const handleHeader = diffY => {
|
||||
if (window.pageYOffset >= $('.joe_header').height() && diffY <= 0) {
|
||||
if (flag) return;
|
||||
$('.joe_header').addClass('active');
|
||||
$('.joe_aside .joe_aside__item:last-child').css('top', $('.joe_header').height() - 60 + 15);
|
||||
flag = true;
|
||||
} else {
|
||||
if (!flag) return;
|
||||
$('.joe_header').removeClass('active');
|
||||
$('.joe_aside .joe_aside__item:last-child').css('top', $('.joe_header').height() + 15);
|
||||
flag = false;
|
||||
}
|
||||
};
|
||||
let Y = window.pageYOffset;
|
||||
handleHeader(Y);
|
||||
let _last = Date.now();
|
||||
document.addEventListener('scroll', () => {
|
||||
let _now = Date.now();
|
||||
if (_now - _last > 15) {
|
||||
handleHeader(Y - window.pageYOffset);
|
||||
Y = window.pageYOffset;
|
||||
}
|
||||
_last = _now;
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
2
assets/js/joe.global.min.js
vendored
2
assets/js/joe.global.min.js
vendored
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue
Block a user