在滾動上添加填充

Question

如何在用戶手動滾動並達到某個類別（本例中爲「內容」）時將其添加到名爲navigation的類的頂部填充爲50px的地方

這是我有，但它是不工作，任何幫助表示讚賞。

window.onscroll = function() { 
    var scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop; 
    if (scrollTop >= document.getElementsByClassName("content").offsetTop) { 
    document.getElementsByClassName("navigation").style.paddingTop = "50px"; 
    } else { 
    document.getElementsByClassName("navigation").style.paddingTop = "0px"; 
    } 
} 

Answer 1

getElementsByClassName()返回一個數組，對象，那麼你需要參考你想改當元素的索引你可以使用它，或者你可以給這些元素一個id，而不是使用getElementById()

window.onscroll = function() { 
 
    var scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop; 
 
    if (scrollTop >= document.getElementsByClassName("content")[0].offsetTop) { 
 
    document.getElementsByClassName("navigation")[0].style.paddingTop = "50px"; 
 
    } else { 
 
    document.getElementsByClassName("navigation")[0].style.paddingTop = "0px"; 
 
    } 
 
}

.content { 
 
    padding-top: 100px; 
 
    height: 300vh; 
 
} 
 
.navigation { 
 
    background: #eee; 
 
}

<div class="content"> 
 
    <div class="navigation">asdf</div> 
 
</div>