锚点滚动导航

<style>
      body {
        margin: 0;
      }
      ul,
      li {
        margin: 0;
        list-style: none;
      }
      header {
        position: fixed;
        width: 100%;
        height: 60px;
        box-shadow: 0px 0px 10px 10px rgba(0, 0, 0, 0.5);
        font-size: 32px;
        color: #333;
        text-align: center;
        line-height: 60px;
        transition: all 0.3s;
      }
      main {
        display: block;
      }
      .nav {
        position: fixed;
        top: 60px;
        right: 0;
      }
      .nav li {
        margin: 4px 0;
        background-color: #eee;
        color: #333;
        text-align: center;
        line-height: 40px;
        font-size: 24px;
        background-color: #eee;
      }
      .nav .active {
        color: #fff;
        background-color: #333;
      }
      .nav li a {
        display: block;
        width: 120px;
        height: 40px;
        color: inherit;
        text-decoration: none;
      }
      .body li {
        margin: 0 auto;
        width: 900px;
        height: 400px;
        background-color: #999;
        font-size: 28px;
        color: #333;
        text-align: center;
        line-height: 400px;
      }
      .body li:nth-child(odd) {
        background-color: #ccc;
      }
      footer {
        height: 300px;
        background-color: #333;
        font-size: 32px;
        color: #fff;
        text-align: center;
        line-height: 300px;
      }
    </style>

<header>header</header>
    <main>
      <div id="fixed-anchor">
        <ul class="nav">
          <li><a href="javascript: void(0);">1</a></li>
          <li><a href="javascript: void(0);">2</a></li>
          <li><a href="javascript: void(0);">3</a></li>
          <li><a href="javascript: void(0);">4</a></li>
          <li><a href="javascript: void(0);">5</a></li>
        </ul>

        <ul class="body">
          <li>1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
          <li>5</li>
        </ul>
      </div>
    </main>
    <footer>footer</footer>

<script>
      function FixedAnchor({ el, top, selected, scroll, click }) {
        document.addEventListener("scroll", onScroll);
        var scrollTops = [0, 0];
        var isPullUp = false;
        var fixedAnchor = query(el);
        var nav = fixedAnchor.getElementsByClassName("nav")[0];
        var navChild = nav.children;
        var body = fixedAnchor.getElementsByClassName("body")[0];
        var bodyChild = body.children;
        var offsetTops = [];
        var index = 0;
        for (var i = 0; i < bodyChild.length; i++) {
          offsetTops.push(bodyChild[i].offsetTop);
          (function (j) {
            navChild[j].addEventListener("click", function (e) {
              click(j);
            });
          })(i);
        }
        nav.children[selected].className = "active";

        function onScroll() {
          var scrollTop =
            document.body.scrollTop || document.documentElement.scrollTop;
          scrollTops.shift();
          scrollTops.push(scrollTop);
          isPullUp = scrollTops[1] > scrollTops[0] ? true : false;
          for (var i = 0; i < offsetTops.length; i++) {
            if (scrollTop > offsetTops[i] - top) {
              index = i;
              for (var j = 0; j < navChild.length; j++) {
                nav.children[j].className = "";
              }
              nav.children[index].className = "active";
            }
          }
          scroll(isPullUp, index);
        }

        function query(el) {
          if (typeof el === "string") {
            var selected = document.querySelector(el);
            if (!selected) {
              console.warn("Cannot find element: " + el);
              return document.createElement("div");
            }
            return selected;
          } else {
            return el;
          }
        }
      }
      var fixedAnchor = new FixedAnchor({
        el: "#fixed-anchor",
        top: 100,
        selected: 0,
        scroll: function (direction, index) {
          var header = document.querySelector("header");
          if (direction) {
            header.style.transform = "translateY(-60px)";
          } else {
            header.style.transform = "translateY(0)";
          }
        },
        click: function (index) {
          var a = document.querySelectorAll(".body li")[index].offsetTop;
          scrollTo(0, a);
        },
      });
    </script>