From bc91aa6b7360bf520fd7e0f7a61a934c4d20ea33 Mon Sep 17 00:00:00 2001 From: Jeffrey Tse Date: Tue, 24 Sep 2019 15:19:05 +0800 Subject: fix: corrcet hash locate, menu item hilight issues --- _includes/extensions/hashlocate.html | 17 ++++++++++------- _includes/sidebar/article-menu.html | 9 ++++++--- _sass/misc/common-list.scss | 4 +++- _sass/yat.scss | 2 +- 4 files changed, 20 insertions(+), 12 deletions(-) diff --git a/_includes/extensions/hashlocate.html b/_includes/extensions/hashlocate.html index 6faf553..5194273 100644 --- a/_includes/extensions/hashlocate.html +++ b/_includes/extensions/hashlocate.html @@ -7,18 +7,21 @@ return; } - var header = document.querySelector('header'); + var header = document.querySelector('header.site-header'); + var headerRect = header.getBoundingClientRect(); + var headerTop = Math.floor(headerRect.top); + var headerHeight = Math.floor(headerRect.height); var scrollPos = getScrollPos(); - var offsetY = element.offsetTop - (header.offsetTop + header.offsetHeight + 20); + var offsetY = element.offsetTop - (headerTop + headerHeight + 20); - if (offsetY == scrollPos.y) { + if (offsetY == scrollPos.y) { return; } - if (header.offsetTop == 0 && offsetY > scrollPos.y) { - offsetY += header.offsetHeight; - } else if (header.offsetTop < 0 && offsetY < scrollPos.y) { - offsetY -= header.offsetHeight; + if (headerTop == 0 && offsetY > scrollPos.y) { + offsetY += headerHeight + 2; + } else if (headerTop < 0 && offsetY < scrollPos.y) { + offsetY -= headerHeight - 2; } smoothScrollTo(offsetY); diff --git a/_includes/sidebar/article-menu.html b/_includes/sidebar/article-menu.html index 7f83160..c4286b1 100644 --- a/_includes/sidebar/article-menu.html +++ b/_includes/sidebar/article-menu.html @@ -36,9 +36,12 @@ var changed = true; for (var i = headings.length - 1; i >= 0; i--) { var h = headings[i]; - var clientRect = h.getBoundingClientRect(); - var headerHeight = header.offsetTop + header.offsetHeight + 20; - if (clientRect.top <= headerHeight) { + var headingRect = h.getBoundingClientRect(); + var headerRect = header.getBoundingClientRect(); + var headerTop = Math.floor(headerRect.top); + var headerHeight = Math.floor(headerRect.height); + var headerHeight = headerTop + headerHeight + 20; + if (headingRect.top <= headerHeight) { var id = 'h-' + h.getAttribute('id'); var curActive = menu.querySelector('a[href="#' + id + '"]'); if (curActive) { diff --git a/_sass/misc/common-list.scss b/_sass/misc/common-list.scss index 54b7165..e7439a1 100644 --- a/_sass/misc/common-list.scss +++ b/_sass/misc/common-list.scss @@ -15,6 +15,8 @@ } li { + border-bottom: solid 1px #fff; + &:last-child { border-bottom: none; } @@ -29,7 +31,7 @@ transition: background 0.2s; &:hover { - background: mix($theme-color, #fff, 20%); + background: mix($theme-color, #eaeaea, 20%); } } diff --git a/_sass/yat.scss b/_sass/yat.scss index 446a791..4db827b 100644 --- a/_sass/yat.scss +++ b/_sass/yat.scss @@ -31,7 +31,7 @@ $footer-height: $header-height * 1.05 !default; $footer-text-color: rgba(lighten(invert($theme-color), 30%), 50%) !default; $footer-background-color: darken($theme-color, 5%) !default; -$banner-height: 400px !default; +$banner-height: 420px !default; $banner-text-color: lighten($white-color, 0%) !default; $banner-background: darken(#333, 5%) !default; -- cgit v1.2.3