fix: corrcet hash locate, menu item hilight issues
This commit is contained in:
parent
4b70145bed
commit
bc91aa6b73
4 changed files with 20 additions and 12 deletions
|
@ -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);
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -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%);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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;
|
||||
|
||||
|
|
Loading…
Reference in a new issue