diff options
| -rw-r--r-- | source/features/infinite-scroll.css | 4 | ||||
| -rw-r--r-- | source/features/infinite-scroll.tsx | 8 |
2 files changed, 9 insertions, 3 deletions
diff --git a/source/features/infinite-scroll.css b/source/features/infinite-scroll.css new file mode 100644 index 00000000..06ef5d2a --- /dev/null +++ b/source/features/infinite-scroll.css @@ -0,0 +1,4 @@ +aside[aria-label='Explore'] > .footer { + position: sticky !important; + top: 24px; +} diff --git a/source/features/infinite-scroll.tsx b/source/features/infinite-scroll.tsx index a324b80a..d4060f7f 100644 --- a/source/features/infinite-scroll.tsx +++ b/source/features/infinite-scroll.tsx @@ -1,3 +1,4 @@ +import './infinite-scroll.css'; import React from 'dom-chef'; import select from 'select-dom'; import onetime from 'onetime'; @@ -36,9 +37,8 @@ function init(): void { }); // Use cloneNode to keep the original ones for responsive layout - const feedFooter = select('.news > .f6')!.cloneNode(true); + const feedLink = select('.news a.f6')!.cloneNode(true); const footer = select('.footer > .d-flex')!.cloneNode(true); - footer.classList.add('mt-3'); for (const child of footer.children) { child.classList.remove('pl-lg-4', 'col-xl-3'); @@ -46,7 +46,9 @@ function init(): void { select('[aria-label="Explore"]')!.append( <div className="footer"> - {feedFooter} + <div> + {feedLink} + </div> {footer} </div>, ); |