fix: pfe-jump-links offset & updates to demo file

README.md

@@ -47,6 +47,10 @@ Many commands have an optional argument of space-separated component name(s), if
 # Build and watch all components, run the server to preview demo pages
 npm run dev
 
+
+
+# Run, watch, and build one or more component(s)
+=======
 # Build and watch on one or more components, run the server to preview demo pages
 npm run dev [component-name(s)]
 ```

elements/pfe-jump-links/README.md

@@ -2,12 +2,12 @@
 
 
 ## Usage
-This component is focused on reading content inside the <pfe-jump-links-panel> and updating a sidebar or horizontal nav with to indicate the section of the document currently being viewed. As a developer, you have the choice of whether you bring your own markup to the nav, or have the nav build a DOM tree for you. Please note the shape of the DOM tree below. In order to support sub-section highlighting jump links must be very opinionated about the DOM tree.
+This component is focused on reading content inside the <pfe-jump-links-panel> and updating a sidebar or horizontal nav to indicate the section of the document currently being viewed. As a developer, you have the choice of whether you bring your own markup to the nav, or have the nav build a DOM tree for you. Please note the shape of the DOM tree below. In order to support sub-section highlighting jump links must be very opinionated about the DOM tree.
 
-Inside of <pfe-jump-links-panel> add the class .pfe-jump-links-panel__section to tell the component to watch for when that section crosses the scroll threshold. If this section has sub-sections you add the class .has-sub-section to the section parent (i.e. section 8) and add .sub-section to the child sections (i.e. 8.1). Make sure to add an id to each section, this id will match to the href attribute of the corresponding <a> tag.
+Inside of <pfe-jump-links-panel> add the class .pfe-jump-links-panel__section to tell the component to watch for when that section crosses the scroll threshold. If this section has sub-sections you add the class .has-sub-section to the section parent (i.e. section 8) and add .sub-section to the child sections (i.e. 8.1). Make sure to add an id to each section, this id should match to the href attribute of the corresponding <a> tag.
 
 ## Wiring up the nav
-The panel and nav are wired up by a scrolltarget and id. On the panel add an attribute scrolltarget="foo". This will correspond to the nav's #id. Add the corresponding id to your nav like so id="foo". The last step is to match the <a> tag's href attribute to specific sections (just like we would with same page anchor links). See below for a simple example with three sections where section two has two sub-sections:
+The panel and nav are wired up by a scrolltarget and id. On the panel add an attribute scrolltarget="foo". This will correspond to the nav's #id. Add the corresponding id to your nav like so id="foo". The last step is to match the <a> tag's href attribute to specific sections (just like you would with same page anchor links). See below for a simple example with three sections where section two has two sub-sections:
 
 ```html
 <pfe-jump-links-nav id="jumplinks1" default>
@@ -84,6 +84,8 @@ No extra roles or aria labels are required because we're using standard html tag
 
 - `style="--pfe-jump-links-panel--offset: {integer};"`: You can control offset in your styling layer as well. This value can be set directly on the component inside a style attribute, e.g. `style="--pfe-jump-links-panel--offset: 100;"` or using the appropriate selector in another file. Please note that adding an attribute will take precedence over a css value. At the moment only integer values passed to this key are valid. No other values are supported. This means that passing "300px", "2rem","calc(100% - 12px)" will all result in JavaScript errors. You should pass a number that correlates to pixels. To read about the `pfe-c-offset` attribute, see above.
 
+- `style="--pfe-jump-links-panel__section--spacer: {integer}{unit};"`: pfe-jump-links are built with native behavior in terms of anchor links and scroll. That means that clicking a nav link will adjust the viewport to show the top of that section aligned with the top of the browser. This native browser is undesirable in certain cases such as working with a "sticky" navigation bar or other elements placed outside of the normal document flow. The panel components inserts a "spacer" just before each section that can be manipulated with this custom property. Specify a unit along with an integer like so: `--pfe-jump-links-panel__section--spacer: 100px;`.
+
 ## Events
 This component fires an event when a link is made active.
 

elements/pfe-jump-links/demo/demo.css

@@ -0,0 +1,72 @@
+html {
+    background: #eee;
+    scroll-behavior: smooth;
+}
+
+:root{
+    --pfe-navigation--Height--actual: 55px;
+    --pfe-jump-links--nav-height: 62px;
+    --pfe-jump-links-panel__section--spacer: 117px;
+    --pfe-jump-links-panel--offset: 120px;
+}
+
+a.pfe-jump-links-nav__item {
+    /* Just in here for sanity knowing outside styles can't leak in */
+    color: orange !important;
+}
+
+.sticky {
+    position: sticky;
+    top: 55px;
+}
+
+
+/* SET OFFSET */
+/* .special {
+    --pfe-jump-links-panel--offset: 100;
+    --pfe-jump-links__nav--offset: 100px;
+}
+@media(max-width: 992px) {
+    .special{
+    --pfe-jump-links-panel--offset: 60px;
+    --pfe-jump-links__nav--offset: 60px;
+    }   
+} */
+
+/* 
+    * Fixing the issue where the headers are under the stick nav
+    * https://stackoverflow.com/questions/4086107/fixed-page-header-overlaps-in-page-anchors
+    */
+
+
+/* FAKE NAV BAR */
+#navbar {
+  position: fixed;
+  top: 0;
+  width: 100%;
+  overflow: hidden;
+  background-color: #333;
+  height: var(--pfe-navigation--Height--actual);
+}
+
+#navbar a {
+  float: left;
+  display: block;
+  color: #f2f2f2;
+  text-align: center;
+  padding: 14px 16px;
+  text-decoration: none;
+  font-size: 17px;
+}
+/* 
+.pfe-jump-links__section--spacer {
+  content: '';
+  display: block;
+  position: relative;
+  width: 0;
+  margin-top: -64px;
+  height: 64px;
+  margin-top: calc( -1 * var(--pfe-jump-links-panel__section--spacer) );
+  height: var(--pfe-jump-links-panel__section--spacer);
+} */
+