js+css实现好看的文章段落滚动指示器导航效果代码-html代码-BFW代码库

代码语言：html

代码描述：js+css实现好看的文章段落滚动指示器导航效果代码，显示当前阅读文章的总体进度和位置，还可以打开段落导航条进行滚动跳转到相关段落。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  
  <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/normalize.5.0.css">
  
  
<style>


@layer normalize, base, demo, scroll;

@layer popover {
  :root {
    --bottom: 2rem;
    --speed: 0.3s;
    --power-in: linear(
      0 0%,
      0.0039 6.25%,
      0.0156 12.5%,
      0.0352 18.75%,
      0.0625 25%,
      0.0977 31.25%,
      0.1407 37.5%,
      0.1914 43.74%,
      0.2499 49.99%,
      0.3164 56.25%,
      0.3906 62.5%,
      0.5625 75%,
      0.7656 87.5%,
      1 100%
    );
    --power-in-out: linear(
      0 0%,
      0.0012 14.95%,
      0.0089 22.36%,
      0.0297 28.43%,
      0.0668 33.43%,
      0.0979 36.08%,
      0.1363 38.55%,
      0.2373 43.07%,
      0.3675 47.01%,
      0.5984 52.15%,
      0.7121 55.23%,
      0.8192 59.21%,
      0.898 63.62%,
      0.9297 66.23%,
      0.9546 69.06%,
      0.9733 72.17%,
      0.9864 75.67%,
      0.9982 83.73%,
      1 100%
    );
    --power-out: linear(
      0 0%,
      0.2342 12.49%,
      0.4374 24.99%,
      0.6093 37.49%,
      0.6835 43.74%,
      0.7499 49.99%,
      0.8086 56.25%,
      0.8593 62.5%,
      0.9023 68.75%,
      0.9375 75%,
      0.9648 81.25%,
      0.9844 87.5%,
      0.9961 93.75%,
      1 100%
    );
    --ease: var(--power-in);
    --trigger-width: 190px;
    --trigger-height: 44px;
  }

  :root:has(:popover-open) {
    --ease: var(--power-out);
  }

  [popover]:popover-open .backdrop-blur {
    scale: 1;
    opacity: 1;
  }

  @starting-style {
    [popover]:popover-open .backdrop-blur {
      scale: 0;
      opacity: 0;
    }
  }

  .trigger {
    width: var(--trigger-width);
    height: var(--trigger-height);
    border-radius: 22px;
    color: light-dark(canvas, canvasText);
    border: 0;
    outline-color: white;
  }

  :root:has(.trigger:focus-visible) [popover] {
    outline: 2px solid white;
  }

  .trigger,
  .contents {
    background: light-dark(hsl(0 0% 8%), hsl(0 0% 14%));
  }

  .contents {
    display: flex;
    overflow: hidden;
    height: 100%;
    width: 100%;
    flex-direction: column-reverse;
    border-radius: 22px;
    padding: 0 6px;
    transition: padding var(--speed);
    transform: translate3d(0, 0, 0);
    @starting-style {
      padding: 1rem;
    }
  }

  @starting-style {
    [popover]:popover-open .contents {
      padding: 0 6px;
    }
  }

  [popover] {
    border: 0px;
    border-radius: 22px;
    background: transparent;
    padding-block: 0;
    overflow: visible;
  }

  [popover] .trigger__details {
    min-height: 44px;
    flex-basis: 44px;
  }

  .trigger__details {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-left: 0.5rem;
    padding-right: 0.25rem;
    width: 100%;
  }

  .trigger__details svg {
    width: 24px;
  }

  .trigger__details .lines {
    -webkit-animation: draw both linear;
            animation: draw both linear;
    animation-timeline: --content;
  }

  .trigger__details > span:first-of-type {
    flex: 1;
    display: flex;
    align-items: center;
    text-align: left;
    gap: 0.25rem;

    svg {
      width: 18px;
    }
  }

  @-webkit-keyframes draw {
    to {
      stroke-dashoffset: 0;
    }
  }

  @keyframes draw {
    to {
      stroke-dashoffset: 0;
    }
  }

  [popovertargetaction] {
    anchor-name: --opener;
  }

  [popover]:popover-open {
    display: flex;
  }

  [popover]:popover-open .contents {
    padding: 1rem;
  }
  @starting-style {
    [popover]:popover-open .contents {
      padding: 0 6px;
    }
  }

  [data-alignment='left'] .trigger,
  [data-alignment='left'] [popover] {
    left: 1rem;
  }

  [data-alignment='right'] .trigger,
  [data-alignment='right'] [popover] {
    right: 1rem;
  }

  [data-alignment='center'] .trigger,
  [data-alignment='center'] [popover] {
    left: 50%;
    translate: -50% 0;
  }

  [popover] {
    flex-direction: column-reverse;
    position-anchor: --opener;
    transition-property: display, overlay, width, height;
    transition-duration: var(--speed);
    transition-behavior: allow-discrete;
    transition-timing-function: var(--ease);
    color: white;
    margin: unset;
    inset: unset;
    bottom: var(--bottom);
    width: var(--trigger-width);
    height: var(--trigger-height);
    z-index: 99999999;
    padding: 0;
    interpolate-size: allow-keywords;

    @starting-style {
      width: var(--trigger-width);
      height: var(--trigger-height);
    }
  }

  [popover] ol {
    padding-inline: 0.5rem;
    padding-left: 2.5rem;
    list-style: pad-it;
    display: flex;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    margin: 0;
    flex-direction: column;
    filter: blur(4px);
    opacity: 0;
    transition: filter var(--speed), opacity var(--speed);
    transition-timing-function: var(--ease);
  }

  [popover]:popover-open ol {
    filter: blur(0px);
    opacity: 1;
  }

  @starting-style {
    [popover]:popover-open ol {
      filter: blur(4px);
      opacity: 0;
    }
  }

  [popover]:popover-open {
    width: var(--content-width, -webkit-fit-content);
    width: var(--content-width, -moz-fit-content);
    width: var(--content-width, fit-content);
    height: var(--content-height, -webkit-fit-content);
    height: var(--content-height, -moz-fit-content);
    height: var(--content-height, fit-content);
  }

  li::marker {
    color: #999;
  }

  li:has(a:is(:hover, :focus-visible))::marker {
    color: #fff;
  }

  ol li a {
    color: inherit;
    white-space: nowrap;
    padding-block: 0.5rem;
    text-decoration: none;
    display: inline-block;
    color: #999;
    flex: 1;
    width: 100%;

    &:is(:hover, :focus-visible) {
      color: #fff;
    }
  }

  @starting-style {
    [popover]:popover-open {
      width: var(--trigger-width);
      height: var(--trigger-height);
    }
  }

  [popover]::-webkit-backdrop {
    -webkit-transition-property: overlay, display, opacity;
    transition-property: overlay, display, opacity;
    transition-duration: var(--speed);
    transition-behavior: allow-discrete;
    transition-timing-function: var(--ease);
    background: hsl(0 0% 0% / 0.25);
    opacity: 0;
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
  }

  [popover]::backdrop {
    transition-property: overlay, display, opacity;
    transition-duration: var(--speed);
    transition-behavior: allow-discrete;
    transition-timing-function: var(--ease);
    background: hsl(0 0% 0% / 0.25);
    opacity: 0;
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
  }

  [popover] button {
    background: #0000;
    border: none;
    padding: 0;
    color: inherit;
    cursor: pointer;
  }

  [data-alignment='right'] [popover.........完整代码请登录后点击上方下载按钮下载查看