スクロール時にパディングを追加する

Question

ユーザーが手動でスクロールして特定のクラスに到達したときの位置にするにはどうすればよいですか（この例では「コンテンツ」です、ナビゲーションという名前のクラスに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>