語境我正在制作一個博客網站，我希望有一個粘性元素，該元素會隨著用戶滾動而在每個新的一年和月份進行更新。這樣標題就會顯示列出的博客文章的當前月份和年份。編碼的時候，我嘗試用HTML實現效果，如果不行就用CSS，如果還是不行就用JS。我相信這是一個很好的做法，因為它使用內置功能并減少了所需的計算資源，但如果您不同意這個觀點，請告訴我。問題理想情況下，元素的樣式在“卡住”時會發生變化。為此，我查看了David Walsh 的解決方案，該解決方案使用IntersectionObserver但在添加多個元素時會出現故障。我面臨的主要問題是，當有多個條目時，腳本會將位于窗口底部邊框的元素檢測為“固定”。代碼這是一個片段。我還用相同的代碼制作了一個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>