滚动到一定位置 悬浮在顶部

摘要：玩游戏许愿主会场红包翻倍页面滚动处理逻辑获取锚点合集

.float-box

nav.clearfix(:class="{"float": floatNav}")
  li
    a(href="#p1") 玩游戏
  li
    a(href="#p2") 许愿
  li
    a(href="#p3") 主会场
  li
    a(href="#p4") 红包翻倍

#p1
section#s1

a.banner(href="")

#p2
section#s2

   a.banner(href="")

// 页面滚动处理逻辑

  bindScrollEvent() {
    const self = this;
    // 获取锚点合集
    const archors = $("nav li a");
    // const flagOffset = $("#main").offsetTop().top;
    
    const flagOffset = document.getElementById("main").offsetTop;
    let tops = [];
    let raf;

    (() => {
      tops = [];
      let _id;
      // archors.forEach((item, index) => {
      //   _id = item.getAttribute("href");
      //   tops.push($(_id).offsetTop - 10);
      // });
      $("nav li a").each(function(i,v){
        _id = v.getAttribute("href");
        tops.push($(_id).offset().top - 10);
      });
    })();

    (() => {
      const part = location.hash;
      if (part && $(part)) {
        // console.log(window.scrollTop || document.body.scrollTop);
        setTimeout(function() {
          window.scrollTo(0, $(part).offset().top);
        }, 10);
      }
    })();

    const onscroll = () => {
      const st = window.scrollTop || document.body.scrollTop;
      let part;

      // console.log(st,flagOffset);

      if (st > flagOffset) {
        self.floatNav = true;
      } else {
        self.floatNav = false;
      }

      tops.forEach((item, index) => {
        if (st >= item) {
          if (!tops[index + 1]) {
            part = tops.length - 1;
          } else if (st <= tops[index + 1]) {
            part = index;
          }
        } else if (st < item) {
          if (!tops[index - 1]) {
            part = 0;
          } else if (st >= tops[index - 1]) {
            part = index - 1;
          }
        }
      });
      // archors.forEach((item, index) => {
      //   item.className = "";
      // });
      $("nav li a").each(function(i,v){
        v.className = "";
      });
      // archors[part].className = "active";
      $("nav li a")[part].className = "active";
    }

    window.addEventListener("scroll", () => {
      raf = requestAnimationFrame(onscroll);
    });
  },