JavaScript Sticky 吸顶效果实现与优化

Published: at 01:45 PMSuggest Changes

这几天在实现 Sticky 吸顶效果，好家伙，真是一堆问题

可以先看文章 【前端词典】5 种滚动吸顶实现方式的比较 [性能升级版]

先说一下用 监听 scroll 配合 position: fixed 实现吸顶

const sticky = document.querySelector(".sticky");
const stickyTop = sticky.offsetTop;

window.addEventListener("scroll", () => {
  if (window.scrollY >= stickyTop) {
    sticky.style.position = "fixed";
    sticky.style.top = "0";
  } else {
    sticky.style.position = "static";
  }
});

另外一个 sticky.getBoundingClientRect().top 方法也可以

const sticky = document.querySelector(".sticky");
const stickyTop = sticky.getBoundingClientRect().top;

window.addEventListener("scroll", () => {
  if (stickyTop <= 0) {
    sticky.style.position = "fixed";
    sticky.style.top = "0";
  } else {
    sticky.style.position = "static";
  }
});

但是这个有不少问题，比如 position: fixed 会脱离文档流，导致下面的元素上移，这个时候需要给下面的元素加上 margin-top，但是这个 margin-top 需要动态计算，因为 position: fixed 之后，下面的元素会上移，所以需要计算 margin-top 的值

const sticky = document.querySelector(".sticky");
const stickyTop = sticky.getBoundingClientRect().top;
const content = document.querySelector(".content");

window.addEventListener("scroll", () => {
  if (stickyTop <= 0) {
    sticky.style.position = "fixed";
    sticky.style.top = "0";
    content.style.marginTop = `${sticky.offsetHeight}px`;
  } else {
    sticky.style.position = "static";
    content.style.marginTop = "0";
  }
});

如果只是这样就好了，但新的问题又来了，我发现滚动过快的时候，会有抖动现象，哪怕你补充上 margin-top 也没用

我研究了一下这个抖动，是因为滚动的太快了，然后元素已经上滑了一段距离，这时候你才去设置 sticky.style.position = 'fixed'; 它会回弹回去，造成了抖动现象。

期间我查了大量的资料，包括用 requestAnimationFrame

function update() {
  if (stickyTop <= 0) {
    sticky.style.position = "fixed";
    sticky.style.top = "0";
    content.style.marginTop = `${sticky.offsetHeight}px`;
  } else {
    sticky.style.position = "static";
    content.style.marginTop = "0";
  }
  requestAnimationFrame(update);
}

update();

然后 IntersectionObserver 方法也被我盯上了

阮一峰的笔记 NDN IntersectionObserver

```html
<div class="sticky">
  <div class="sticky-top"></div>
  <img src="https://www.baidu.com/img/flexible/logo/pc/result.png" alt="图片" />
  <div class="text">文本部件</div>
  <div class="sticky-bottom"></div>
</div>

上面的 sticky 是一个容器，里面有 sticky-top sticky-bottom img text 四个部件

sticky-top 和 sticky-bottom 是两个空的 div，用来占位的，sticky-top sticky-bottom 来观察部件是否出现在视口，用来优化性能

// 获取所有的文本部件
function loadAllTextSection() {
  // 获取所有的文本部件 text-section 和 text-section-garagraph
  const textSectionList = document.querySelectorAll(
    ".text-section, .text-section-garagraph"
  );
  // 遍历所有的文本部件
  console.log("textSectionList", textSectionList);
  return textSectionList;
}

// 获取文本部件属性以及文本部件内的图片 sticky-img
function getTextSectionAttribute(textSection) {
  // 获取文本部件 text-content
  const text = textSection.querySelector(".text-content");

  // 如果是不带图片的文本部件则返回
  if (!text) {
    return;
  }

  // 获取文本部件的属性
  const textTop = text.offsetTop;
  const textHeight = text.clientHeight;
  const textBottom = textTop + textHeight;

  // 获取文本部件内的图片
  const image = textSection.querySelector(".sticky");

  // 获取图片的属性
  const imageTop = image.offsetTop;
  const imageHeight = image.clientHeight;
  const imageBottom = imageTop + imageHeight;

  // 获取文本部件的吸顶探测元素 sticky-top 和 sticky-bottom
  const stickyTop = textSection.querySelector(".sticky-top");
  const stickyBottom = textSection.querySelector(".sticky-bottom");

  return {
    text,
    textTop,
    textHeight,
    textBottom,
    image,
    imageTop,
    imageHeight,
    imageBottom,
    stickyTop,
    stickyBottom,
  };
}

// 处理文本部件
function handleTextSection(textSection) {
  // 获取文本部件的属性
  const attribute = getTextSectionAttribute(textSection);

  if (!attribute) {
    return;
  }

  // 设置偏移高度
  const offsetHeight = 0;

  // 获取当前部件 textSection 高度并加上 height 属性
  const elementHeight = textSection.offsetHeight;
  textSection.style.height = elementHeight - offsetHeight + "px";

  const { text, image, stickyTop, stickyBottom } = attribute;

  // 获取 stickyTop 的位置 并设置 top
  const stickyTopTop = stickyTop.offsetTop;
  stickyTop.style.position = "absolute";
  stickyTop.style.top = stickyTopTop + "px";

  // 获取 stickyBottom 的位置 并设置 top
  const stickyBottomTop = stickyBottom.offsetTop;
  stickyBottom.style.position = "absolute";
  stickyBottom.style.top = stickyBottomTop + "px";

  // 获取文本部件高度，然后加上 height 属性，使其不会因为图片吸顶而导致页面高度变化
  const textTop = text.offsetTop;
  text.style.position = "absolute";
  text.style.top = textTop + "px";
  text.style.paddingBottom = "10px";
  // 设置文本部件的 margin-top 和 margin-bottom 为 0
  text.style.marginTop = "0";
  text.style.marginBottom = "0";

  // 使用 IntersectionObserver API 获取文本部件 sticky-top 和 sticky-bottom 的位置
  const observerTop = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      // top 消失但是 文本部件还在 吸顶
      const isTextSection = isElementInViewport(textSection);
      const isText = isElementInViewport(text);

      if (!entry.isIntersecting && isTextSection && isText) {
        // image.classList.add('fixed')
        image.style.position = "fixed";
      }

      if (entry.isIntersecting) {
        // image.classList.remove('fixed')
        image.style.position = "sticky";
      }
    });
  });

  const observerBottom = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      const isTop = isElementInViewport(stickyTop);
      // 返回来查看内容的时候要吸顶
      if (entry.isIntersecting && !isTop) {
        // image.classList.add('fixed')
        image.style.position = "fixed";
      }
    });
  });

  const observerText = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (!entry.isIntersecting) {
        // image.classList.remove('fixed')
        image.style.position = "sticky";
      }
    });
  });

  // 监听 sticky-top 和 sticky-bottom 以及文本部件的位置
  observerTop.observe(stickyTop);
  observerBottom.observe(stickyBottom);
  observerText.observe(textSection);
}

还有两个获取元素是否在视口的方法

https://juejin.cn/post/7194453607108837431 https://zhuanlan.zhihu.com/p/364422037

// 这个是元素是否在视口（就是元素是不是部分在视口内）
function isElementInViewport(element) {
  const rect = element.getBoundingClientRect();
  return (
    rect.top < (window.innerHeight || document.documentElement.clientHeight) &&
    rect.left < (window.innerWidth || document.documentElement.clientWidth) &&
    rect.bottom > 0 &&
    rect.right >= 0
  );
}

// 这个是视口是否包含元素（就是元素是不是完全在视口内）
function isElementInViewport(el) {
  const rect = el.getBoundingClientRect();
  return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <=
      (window.innerHeight || document.documentElement.clientHeight) &&
    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
  );
}

获取滚动条位置

// 获取滚动条位置
function getScrollTop() {
  return document.documentElement.scrollTop || document.body.scrollTop;
}

甚至你设置了吸顶之后如果视口不要这个元素了你还得删掉这个元素的吸顶

// 处理 Header
function handleHeader() {
  const header = document.querySelector(".header");

  // 获取 header 内 class 为 background 的元素
  const background = header.querySelector(".background");

  // 检查 header 是否在视口内
  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        // 在视口内 background 设置为 position: fixed
        background.style.display = "block";
      } else {
        // 不在视口内 background 设置为 position: none
        background.style.display = "none";
      }
    });
  });

  // 监听 header 的位置
  observer.observe(header);
}

你看我写了这么长，是不是以为这样就把吸顶优化了，但是还是有轻微的抖动效果，我也是醉了，然后又查了各种资料，比如用 GPU 渲染

看，有个家伙和我的场景一样，他努力过了，失败了。

https://stackoverflow.com/questions/23990069/absolute-positioned-floating-header-jitters-in-safari

他想用硬件加速的方式去优化

.sticky {
  backface-visibility: hidden;
  perspective: 1000;
  transform: translateZ(0);
  transform: translate3d(0, 0, 0);
}

/* 都试验过，效果微乎其微 */

然后又学了一下 overscroll-behavior

.sticky {
  overscroll-behavior: contain;
}

还有个 [overflow-anchor](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-anchor)

.sticky {
  overflow-anchor: none;
}

除了上面的乱七八糟的 还有个设置 fixed 之后的元素的 z-index 失效了

https://blog.csdn.net/daoxiaofei/article/details/109524583

  1. z-index 只有在设置了 position 为 relative,absolute,fixed 时才会有效。
  2. z-index 的“从父原则”。当你发现把 z-index 设的多大都没用时，看看其父元素是否设置了有效的 z-index，当然别忘了先看看自身是否设置了 position。

最后我修改了 Dom 结构用 position: sticky 实现了吸顶效果

<img
  src="https://www.baidu.com/img/flexible/logo/pc/result.png"
  alt="图片"
  class="sticky"
/>
<div class="text">文本部件</div>

IOS position: sticky 吸顶，别的元素 z-index 失效

https://ecomgraduates.com/blogs/news/fixing-z-index-issue-on-safari-browser

用硬件加速法

#element {
  -webkit-transform: translate3d(0, 0, 0);
  z-index: 999;
}

.a {
  position: fixed;
  top: 100px;
  left: 100px;
}

.b {
  position: relative;
  z-index: 1;
  -webkit-transform: translateZ(1px);
  -moz-transform: translateZ(1px);
  -o-transform: translateZ(1px);
  transform: translateZ(1px);
}
Previous Post
iOS 内容安全区域处理
Next Post
前端动画库推荐