語(yǔ)境我正在制作一個(gè)博客網(wǎng)站，我希望有一個(gè)粘性元素，該元素會(huì)隨著用戶(hù)滾動(dòng)而在每個(gè)新的一年和月份進(jìn)行更新。這樣標(biāo)題就會(huì)顯示列出的博客文章的當(dāng)前月份和年份。編碼的時(shí)候，我嘗試用HTML實(shí)現(xiàn)效果，如果不行就用CSS，如果還是不行就用JS。我相信這是一個(gè)很好的做法，因?yàn)樗褂脙?nèi)置功能并減少了所需的計(jì)算資源，但如果您不同意這個(gè)觀點(diǎn)，請(qǐng)告訴我。問(wèn)題理想情況下，元素的樣式在“卡住”時(shí)會(huì)發(fā)生變化。為此，我查看了David Walsh 的解決方案，該解決方案使用IntersectionObserver但在添加多個(gè)元素時(shí)會(huì)出現(xiàn)故障。我面臨的主要問(wèn)題是，當(dāng)有多個(gè)條目時(shí)，腳本會(huì)將位于窗口底部邊框的元素檢測(cè)為“固定”。代碼這是一個(gè)片段。我還用相同的代碼制作了一個(gè)jsfiddle 。//Essentially putting David Walsh's code in a loopdocument.querySelectorAll(".myElement").forEach((i) => {const observer = new IntersectionObserver(([i]) => i.target.classList.toggle("is-pinned", i.intersectionRatio < 1),{threshold: [1]});observer.observe(i);})#parent {   height: 2000px; }.myElement {  position: sticky;  top: -1px;}/* styles for when the header is in sticky mode. The transition times accentuate the undesired effect */.myElement.is-pinned {  color: red;  transition: color 0.3s, background-color 0.3s;  background-color: orange;}<div id="parent">  <!-- Adding more than one 'hello' element. The br's are here to add vertical space and be longer than the viewport height -->  <br><br><br><br>  <div class="myElement">Hello!</div>    <br><br><br><br>  <div class="myElement">Hello 2!</div>    <br><br><br><br>  <div class="myElement">Hello 3!</div>    <br><br><br><br>  <div class="myElement">Hello 4!</div>    <br><br><br><br>  <div class="myElement">Hello 5!</div>    <br><br><br><br>  <div class="myElement">Hello 6!</div>    <br><br><br><br>  <div class="myElement">Hello 7!</div>    <br><br><br><br>  <div class="myElement">Hello 8!</div></div>