pfe-jump-links issues with nav panel hash link + positioning

[starryeyez024]

Goals

1. Ensure that each item in the jump links nav is active (shows the highlight color) at the correct time. Which is when that heading in the panel is at the top of the panel, but also accommodates for any sticky elements at the top of the page.
   • sticky items could include pfe-navigation or any other navigation
   • the jump-link-nav accordion on mobile
2. Ensure that when a user clicks an item in the jump links nav, it should scroll to the matching heading in the jump-links-panel, but is offset to accommodate for any sticky elements at the top of the page.
3. On mobile, when the user clicks on a link in the jump links nav, it should scroll to the matching heading in the jump links panel, and then should close the jump-links-nav**
   • **TBD
4. Ensure demo file has faux sticky nav on mobile & desktop, and demo.css leverages the --pfe-navigation--Height--actual css var and sets it to the same height as the faux nav.

Implementation details

1. Write a JS function that looks for items which have the class pfe-jump-links-panel__section in the jump-links-panel, then grabs the ID from that element, and moves it to a new div above that item, like this:

   • before upgrade: <h1 class="pfe-jump-links-panel__section" id="section1">Section 1</h1>
   • after upgrade:

             <div class="pfe-jump-links-panel__section__offset" pfe-id="section1"></div>
             <h1 class="pfe-jump-links-panel__section">Section 1</h1>
   

2. Create a variable like --pfe-jump-links-panel__section--offset and set the value to the sum (using calc) of these three things

   • var(--pfe-navigation--Height--actual)
   • var(--pfe-jump-links--nav-height)
   • var(--jump-links--nudge)

3. Add css:

.pfe-jump-links-panel__section__offset {
    display: block;
    position: relative;
    width: 0;
    height: var(--pfe-jump-links-panel__section--offset);
    margin-top: calc( -1 * var(--pfe-jump-links-panel__section--offset) );

4. Ensure that the value of --pfe-jump-links--nav-height is accurately reported. Should be 0 on desktop, and should use report-height to include borders, so its correct on mobile.
5. Use --pfe-jump-links-panel__section--offset to affect the active highlight on the jump links nav headings, as well as the scroll position on the hash.

Impacted component(s)

• pfe-jump-links

Starter Branch

• pfe-jump-links-demo

Related issues (closed in favor of this one)

• Jump links nav height in CSS variable is incorrect #904
• Add headline offset styles to jump links #959
• Pfe-jump-links reports wrong active distance when beneath a relatively positioned element #962