更新

assets/css/joe.global.min.scss

@@ -52,6 +52,7 @@
 	z-index: 1000;
 	background: var(--background);
 	box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
+	transition: transform 0.35s;
 	&__above {
 		position: relative;
 		z-index: 999;
@@ -288,6 +289,9 @@
 		position: relative;
 		border-top: 1px solid var(--classC);
 		height: 45px;
+		&.active {
+			border-top-color: transparent;
+		}
 		&-class {
 			display: flex;
 			.item {
@@ -394,16 +398,6 @@
 				}
 			}
 		}
-		&-progress {
-			position: absolute;
-			z-index: 1;
-			left: 0;
-			bottom: -3px;
-			height: 3px;
-			border-radius: 1.5px;
-			background: linear-gradient(to right, #4cd964, #5ac8fa, #007aff);
-			transition: width 0.35s;
-		}
 	}
 	&__searchout {
 		position: absolute;
@@ -655,6 +649,7 @@
 		&:last-child {
 			position: sticky;
 			margin-bottom: 0;
+			transition: top 0.35s;
 		}
 		&-title {
 			display: flex;

assets/js/joe.global.js

@@ -40,13 +40,6 @@ document.addEventListener('DOMContentLoaded', () => {
 		$(document).on('click', function () {
 			$('.joe_header__above-search .result').removeClass('active');
 		});
-		const handle = () => {
-			if ($('.joe_header__above-search .result').hasClass('active')) $('.joe_header__above-search .result').removeClass('active');
-		};
-		$(document).on('scroll', () => {
-			if (window.requestAnimationFrame) window.requestAnimationFrame(handle);
-			else handle();
-		});
 	}
 
 	/* 激活全局下拉框功能 */
@@ -74,11 +67,12 @@ document.addEventListener('DOMContentLoaded', () => {
 
 	/* 激活全局返回顶部功能 */
 	{
+		let _debounce = null;
 		const handleScroll = () => ((document.documentElement.scrollTop || document.body.scrollTop) > 300 ? $('.joe_action_item.scroll').addClass('active') : $('.joe_action_item.scroll').removeClass('active'));
 		handleScroll();
 		$(document).on('scroll', () => {
-			if (window.requestAnimationFrame) window.requestAnimationFrame(handleScroll);
-			else handleScroll();
+			clearTimeout(_debounce);
+			_debounce = setTimeout(handleScroll, 80);
 		});
 		$('.joe_action_item.scroll').on('click', () => window.scrollTo({ top: 0, behavior: 'smooth' }));
 	}
@@ -187,11 +181,6 @@ document.addEventListener('DOMContentLoaded', () => {
 		}
 	}
 
-	/* 设置侧边栏最后一个元素的高度 */
-	{
-		$('.joe_aside__item:last-child').css('top', $('.joe_header').height() + 15);
-	}
-
 	/* 侧边栏舔狗日记 */
 	{
 		if ($('.joe_aside__item.flatterer').length) {
@@ -223,24 +212,6 @@ document.addEventListener('DOMContentLoaded', () => {
 		}
 	}
 
-	/* 计算页面滚动多少 */
-	{
-		const calcProgress = () => {
-			let scrollTop = $(window).scrollTop();
-			let documentHeight = $(document).height();
-			let windowHeight = $(window).height();
-			let progress = parseInt((scrollTop / (documentHeight - windowHeight)) * 100);
-			if (progress <= 0) progress = 0;
-			if (progress >= 100) progress = 100;
-			$('.joe_header__below-progress').css('width', progress + '%');
-		};
-		calcProgress();
-		$(document).on('scroll', () => {
-			if (window.requestAnimationFrame) window.requestAnimationFrame(calcProgress);
-			else calcProgress();
-		});
-	}
-
 	/* 评论框点击切换画图模式和文本模式 */
 	{
 		if ($('.joe_comment').length) {
@@ -550,4 +521,26 @@ document.addEventListener('DOMContentLoaded', () => {
 			$('.joe_motto').html(motto);
 		}
 	}
+
+	{
+		const handleHeader = diffY => {
+			if (window.pageYOffset >= $('.joe_header').height() && diffY <= 0) {
+				$('.joe_header__below').addClass('active');
+				$('.joe_header').css('transform', `translate3d(0, -${$('.joe_header__above').height()}px, 0)`);
+				$('.joe_aside .joe_aside__item:last-child').css('top', $('.joe_header__below').height() + 15);
+			} else {
+				$('.joe_header__below').removeClass('active');
+				$('.joe_header').css('transform', '');
+				$('.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;
+		});
+	}
 });