diff options
Diffstat (limited to 'src/client/scripts')
| -rw-r--r-- | src/client/scripts/sticky-sidebar.ts | 25 | ||||
| -rw-r--r-- | src/client/scripts/theme.ts | 1 |
2 files changed, 16 insertions, 10 deletions
diff --git a/src/client/scripts/sticky-sidebar.ts b/src/client/scripts/sticky-sidebar.ts index 9d46a7831f..18670bc037 100644 --- a/src/client/scripts/sticky-sidebar.ts +++ b/src/client/scripts/sticky-sidebar.ts @@ -1,40 +1,45 @@ export class StickySidebar { private lastScrollTop = 0; + private container: HTMLElement; private el: HTMLElement; private spacer: HTMLElement; private marginTop: number; private isTop = false; private isBottom = false; + private offsetTop: number; - constructor(el: StickySidebar['el'], spacer: StickySidebar['spacer'], marginTop = 0) { - this.el = el; - this.spacer = spacer; + constructor(container: StickySidebar['container'], marginTop = 0) { + this.container = container; + this.el = this.container.children[0] as HTMLElement; + this.el.style.position = 'sticky'; + this.spacer = document.createElement('div'); + this.container.prepend(this.spacer); this.marginTop = marginTop; + this.offsetTop = this.container.getBoundingClientRect().top; } public calc(scrollTop: number) { if (scrollTop > this.lastScrollTop) { // downscroll - const overflow = this.el.clientHeight - window.innerHeight; + const overflow = Math.max(0, (this.el.clientHeight + this.marginTop) - window.innerHeight); this.el.style.bottom = null; - this.el.style.top = `${-overflow}px`; + this.el.style.top = `${-overflow + this.marginTop}px`; this.isBottom = (scrollTop + window.innerHeight) >= (this.el.offsetTop + this.el.clientHeight); if (this.isTop) { this.isTop = false; - this.spacer.style.marginTop = `${this.lastScrollTop}px`; + this.spacer.style.marginTop = `${Math.max(0, this.lastScrollTop + this.marginTop - this.offsetTop)}px`; } } else { // upscroll - const overflow = this.el.clientHeight - window.innerHeight; + const overflow = (this.el.clientHeight + this.marginTop) - window.innerHeight; this.el.style.top = null; - this.el.style.bottom = `${-overflow - this.marginTop}px`; + this.el.style.bottom = `${-overflow}px`; this.isTop = scrollTop <= this.el.offsetTop; if (this.isBottom) { this.isBottom = false; - const overflow = this.el.clientHeight - window.innerHeight; - this.spacer.style.marginTop = `${this.lastScrollTop - (overflow + this.marginTop)}px`; + this.spacer.style.marginTop = `${this.lastScrollTop + this.marginTop - this.offsetTop - overflow}px`; } } diff --git a/src/client/scripts/theme.ts b/src/client/scripts/theme.ts index c1580c6367..804d808683 100644 --- a/src/client/scripts/theme.ts +++ b/src/client/scripts/theme.ts @@ -17,6 +17,7 @@ export const themeProps = Object.keys(lightTheme.props).filter(key => !key.start export const builtinThemes = [ require('../themes/l-light.json5'), require('../themes/l-apricot.json5'), + require('../themes/l-rainy.json5'), require('../themes/d-dark.json5'), require('../themes/d-persimmon.json5'), |