Skip to content

fix(jump-links): non-contiguous content #2471

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 13 commits into
base: main
Choose a base branch
from
Open

fix(jump-links): non-contiguous content #2471

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
c219689
chore: add demo for non-contiguous content and rh-jump-links scroll b…
Jul 10, 2025
00cc07f
chore: add more content for the sections
Jul 10, 2025
9909a02
Merge branch 'main' into non-contiguous-rh-jump-links
adamjohnson Jul 15, 2025
224551a
Merge branch 'main' into non-contiguous-rh-jump-links
bennypowers Jul 20, 2025
764548e
Merge branch 'main' into non-contiguous-rh-jump-links
bennypowers Jul 22, 2025
1cd6bcf
docs(jump-links): non-contiguous demo
bennypowers Jul 22, 2025
bbf96aa
patch: patch pfe-core for jump-links
bennypowers Jul 22, 2025
8f56cd8
fix: patch for pfe-core
bennypowers Aug 5, 2025
cfbe877
docs(jump-links): update non-contiguous demo
bennypowers Aug 5, 2025
88e8987
fix(jump-links): remove custom root margin
bennypowers Aug 5, 2025
55d4b14
chore: patch scrollspy controller
bennypowers Aug 5, 2025
c7aa2d3
Merge branch 'main' into non-contiguous-rh-jump-links
bennypowers Aug 5, 2025
430d1b7
chore: patch pfe-core
bennypowers Aug 6, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
146 changes: 146 additions & 0 deletions elements/rh-jump-links/demo/non-contiguous-regions.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,146 @@
<div class="grid grid-col-12">
<aside class="left-nav span-md-3">
<ol class="sub-nav">
<li><a href="#chapter-1">Chapter 1</a></li>
<li><a href="#chapter-2">Chapter 2</a></li>
<li><a href="#chapter-3">Chapter 3</a></li>
<li><a href="#chapter-4">Chapter 4</a></li>
<li><a href="#chapter-5">Chapter 5</a></li>
</ol>
</aside>

<aside class="right-nav span-md-2">
<h2>Jump links section</h2>
<rh-jump-links orientation="vertical">
<rh-jump-link href="#sub-chapter-1">Sub-chapter 3.1</rh-jump-link>
<rh-jump-link href="#sub-chapter-2">Sub-chapter 3.2</rh-jump-link>
<rh-jump-link href="#sub-chapter-3">Sub-chapter 3.3</rh-jump-link>
<rh-jump-link href="#sub-chapter-4">Sub-chapter 3.4</rh-jump-link>
<rh-jump-link href="#sub-chapter-5">Sub-chapter 3.5</rh-jump-link>
<rh-jump-link href="#sub-chapter-6">Sub-chapter 3.6</rh-jump-link>
<rh-jump-link href="#sub-chapter-7">Sub-chapter 3.7</rh-jump-link>
<rh-jump-link href="#sub-chapter-8">Sub-chapter 3.8</rh-jump-link>
<rh-jump-link href="#sub-chapter-9">Sub-chapter 3.9</rh-jump-link>
<rh-jump-link href="#sub-chapter-10">Sub-chapter 3.10</rh-jump-link>
<rh-jump-link href="#sub-chapter-11">Sub-chapter 5.1</rh-jump-link>
<rh-jump-link href="#sub-chapter-12">Sub-chapter 5.2</rh-jump-link>
</rh-jump-links>
</aside>

<article class="content">
<section id="chapter-1">
<h1>Chapter 1</h1>
</section>
<section id="chapter-2">
<h2><a href="#chapter-2">Chapter 2</a></h2>
</section>
<section id="chapter-3">
<h2><a href="#chapter-3">Chapter 3</a></h2>
<section id="sub-chapter-1">
<h3><a href="#sub-chapter-1">Sub-chapter 3.1</a></h3>
</section>
<section id="sub-chapter-2">
<h3><a href="#sub-chapter-2">Sub-chapter 3.2</a></h3>
</section>
<section id="sub-chapter-3">
<h3><a href="#sub-chapter-3">Sub-chapter 3.3</a></h3>
</section>
<section id="sub-chapter-4">
<h3><a href="#sub-chapter-4">Sub-chapter 3.4</a></h3>
</section>
<section id="sub-chapter-5">
<h3><a href="#sub-chapter-5">Sub-chapter 3.5</a></h3>
</section>
<section id="sub-chapter-6">
<h3><a href="#sub-chapter-6">Sub-chapter 3.6</a></h3>
</section>
<section id="sub-chapter-7">
<h3><a href="#sub-chapter-7">Sub-chapter 3.7</a></h3>
</section>
<section id="sub-chapter-8">
<h3><a href="#sub-chapter-8">Sub-chapter 3.8</a></h3>
</section>
<section id="sub-chapter-9">
<h3><a href="#sub-chapter-9">sub-chapter 3.9</a></h3>
</section>
<section id="sub-chapter-10">
<h3><a href="#sub-chapter-10">Sub-chapter 3.10</a></h3>
</section>
</section>
<section id="chapter-4">
<h2><a href="#chapter-4">Chapter 4</a></h2>
</section>
<section id="chapter-5">
<h2><a href="#chapter-5">Chapter 5</a></h2>
<section id="sub-chapter-11">
<h3><a href="#sub-chapter-11">Sub-chapter 5.1</a></h3>
</section>
<section id="sub-chapter-12">
<h3><a href="#sub-chapter-12">Sub-chapter 5.2</a></h3>
</section>
</section>
</article>
</div>

<style>
.grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
}

.left-nav {
grid-column: 1/3;
ol.sub-nav {
position: sticky;
top: 80px;
list-style: none;
margin: 0;
padding: 0;
padding-left: 16px;
padding-right: 16px;
li {
padding: var(--rh-space-md) var(--rh-space-lg);
}
}
}

.content {
max-width: 1000px;
grid-column: 3/11;
grid-row: 1/2;
}

.right-nav {
grid-column: 11/13;
> h2 {
position: sticky;
top: 40px;
margin: 0;
font-size: var(--rh-font-size-body-text);
}
rh-jump-links {
position: sticky;
top: 80px;
}
}

[id^="chapter-"] {
min-height: 500px;
background-color: #00F2;
margin-block: var(--rh-space-lg);
}

[id^="sub-chapter-"] {
min-height: 200px;
height: calc(200px + var(--random, 1) * 200px);
background-color: #0F02;
margin-inline-start: var(--rh-space-2xl);
}
</style>

<script type="module">
import '@rhds/elements/rh-jump-links/rh-jump-links.js';
for (const el of document.querySelectorAll('[id^="sub-chapter-"]'))
el.style.setProperty('--random', Math.random());
</script>

1 change: 0 additions & 1 deletion elements/rh-jump-links/rh-jump-links.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,6 @@ export class RhJumpLinks extends LitElement {
#onScroll = this.#overflow.onScroll.bind(this);

#spy = new ScrollSpyController(this, {
rootMargin: '0px 0px 0px 0px',
tagNames: ['rh-jump-link'],
onIntersection: () => {
for (const list of this.querySelectorAll('rh-jump-links-list')) {
Expand Down
Loading