如何找到元素顶部与可查看网页顶部之间的距离

Question

我有一个位置粘性的元素，并将 top 属性设置为 30px。我想要它，以便当元素卡住时（可以这么说）它会添加一个卡住类。我知道可以使用 intersectionObserver 来完成，但是我想知道一种可以在普通 HTML、CSS 或 JS 中完成此操作的方法。

到目前为止我想到的方法是，一旦元素距可查看网页顶部的距离为 30px，就添加该类。在研究时，我遇到过这样的代码：

var elDistanceToTop = window.pageYOffset + el.getBoundingClientRect().top

虽然这确实做了一些事情，但它并没有达到我想要的效果。它的作用是找到元素的顶部到窗口高度的顶部。

（现在，在撰写本文时，我不确定窗口高度是否就是所谓的窗口高度，但我的意思是，如果您向上滚动直到无法再滚动，您将到达的网页部分。有时它是看不见）。

使用此代码，我得到的值始终是恒定的，因为元素没有在页面上向上或向下移动，只是当您向下滚动时视口在页面上向下移动。

相反，函数（或其他）返回的值应该根据您滚动到的位置而变化。在“卡住”位置激活之前，距顶部的距离应根据滚动位置而变化。但一旦达到“卡住”阈值，距顶部的距离应保持不变。

我不介意该解决方案，只要它使用 HTML、CSS 或 JS，但不使用其他内容。

Answer 1

比较元素的 el.getBoundingClientRect().top 与窗口移动的 scrollY 量，然后相应地添加/删除类。

const el = document.querySelector('#container'); 
const elRectTop = el.getBoundingClientRect().top;

const setStickClass = () => {
  if(window.scrollY - 30 >= elRectTop){
    el.classList.add('stuck');
  }else if(window.scrollY - 30 < elRectTop){
    el.classList.remove('stuck');
  }
}

addEventListener('scroll', setStickClass)

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  height: 300vh;
  width: 100%;
  padding-top: 50vh;
}

#container {
  position: sticky;
  top: 30px;
  outline: 2px solid black;
  height: 100vh;
  width: 100%;
}

.stuck {
  background-color: red;
}

<div id="container"></div>