Javascript IntersectionObserver.observe不是对象，如何使用IntersectionObserver

我正在使用css position:sticky创建一个带有粘性列的表。我想在列“卡住”时对其进行不同的样式设置。我的第一个项目涉及当第二列部分滑过第一列或.wdtscroll td:nth子列（1）时，设置其样式。 下面是javascript

const stickyElm = document.querySelector('.wdtscroll td')

const observer = new IntersectionObserver( 
  ([e]) => e.target.classList.toggle('isSticky', e.intersectionRatio < 1),
  {threshold: [1]}
);

observer.observe(stickyElm)

const stickyElm=document.querySelector（'.wdtscroll td'））
const observer=新的IntersectionObserver（
（[e]）=>e.target.classList.toggle（'isSticky'，e.intersectionRatio<1），
{阈值：[1]}
);
观察者观察（stickyElm）

以下是JSFIDLE：

虽然它肯定不是完美的，但我已经通过将它的左位置设置为-1px来实现这一点，这样一旦您开始水平滚动表格，它就会被设置为样式。正如您所看到的，这是有效的，但仅适用于顶部单元格

当我在我的网站上使用此代码时，它不起作用，我会收到一条警告，说明： “TypeError:IntersectionObserver.observe的参数1不是对象。”

当我查它的时候，似乎Object.observe已经过时了

在不使用Object.observe的情况下，我将如何使用此javascript，以及如何针对第一列中的所有td

附加问题：当第二列或.wdtscroll td:nth子列（2）被卡住时，我将如何设置其样式，即使它永远不会滚动过视口

谢谢大家!

以下是JSFIDLE：

以下是我对你的小提琴的回应：

我回答了你在这篇文章中提出的一系列问题：

正如您所看到的，这是有效的，但仅适用于顶部单元格。 …我如何“瞄准”第一列中的所有td

1） 观察者的目标是单个元素（在本例中）。这意味着您不能依赖它来设置多个元素的样式。 相反，要这样做：

([e]) => {
    let all_td = document.querySelectorAll('.wdtscroll td:first-child')
    all_td.forEach(entry =>
        entry.classList.toggle('isSticky', e.intersectionRatio < 1)
    )
}

通过在

onload

中包装观察者激活，在页面完成呈现之前，它不会运行。另一个选项是将所有这些JavaScript移到页面末尾，就在

附加问题：当第二列或.wdtscroll td:nth子列（2）被卡住时，我将如何设置其样式，即使它永远不会滚动过视口

3） 也许是这样

([e]) => {
    let all_td = document.querySelectorAll('.wdtscroll td:nth-child(1)')
    let all_2nd_td = document.querySelectorAll('.wdtscroll td:nth-child(2)')
    all_td.forEach(entry =>
        entry.classList.toggle('isSticky', e.intersectionRatio < 1)
    )
    all_2nd_td.forEach(entry =>
        entry.classList.toggle('isSticky', e.intersectionRatio < 1)
    )
}

4） 没有回答您的任何问题，但我注意到您的CSS总体上存在一些问题。以下是我改变的事情：

CSS

5） 最后，对课堂作业中元素的使用方法进行了批评。您可能有充分的理由在每个

tr

的每个

td

上分配类属性。这也可以更简单地通过使用规则将类属性分配给表本身来实现，这些规则将样式应用于

td:nth child（1）

和

td:nth child（2）

，只使用2条CSS规则。这将消除在JavaScript中循环遍历表的每一行的需要，并利用CSS的特性为批量元素设置样式

CSS:

JavaScript:

// get the sticky element
const stickyElm = document.querySelector('.wdtscroll td')
const tableElm = document.querySelector('.wdtscroll')

const observer = new IntersectionObserver( 
    ([e]) => {
        tableElm.classList.toggle('isSticky', e.intersectionRatio < 1)
    },
  {threshold: [1]}
);

window.onload = function(){
    observer.observe(stickyElm)
}

//获取粘性元素
const stickyElm=document.querySelector（'.wdtscroll td'）
const tablelm=document.querySelector（'.wdtscroll'）
const observer=新的IntersectionObserver（
（[e]）=>{
tableElm.classList.toggle（'isSticky'，e.intersectionRatio<1）
},
{阈值：[1]}
);
window.onload=函数（）{
观察者观察（stickyElm）
}

这对于一个好的、整洁的解决方案来说怎么样？：） 最后一把小提琴：

.wdtscroll tr td:nth-child(2).isSticky {
  background-color: pink;
}

/* added td to the selectors of the next 2 rules */
.wdtscroll tr:nth-child(even) td { background-color: #f2f2f2; }

.wdtscroll tr:hover td { background-color: #ddd; }


/* added tr to the selector list to override the background color set above */
.wdtscroll tr td.isSticky{
  background-color: salmon;
}

.wdtscroll.isSticky tr td:nth-child(1) {
  background-color: salmon;
}
.wdtscroll.isSticky tr td:nth-child(2) {
  background-color: pink;
}

// get the sticky element
const stickyElm = document.querySelector('.wdtscroll td')
const tableElm = document.querySelector('.wdtscroll')

const observer = new IntersectionObserver( 
    ([e]) => {
        tableElm.classList.toggle('isSticky', e.intersectionRatio < 1)
    },
  {threshold: [1]}
);

window.onload = function(){
    observer.observe(stickyElm)
}