我正在尝试向网页添加粘性标头，因此当我向下滚动页面时，标头将保留在页面顶部。问题是，当我向下滚动页面时-粘性页眉覆盖了所有页面内容。 我对此页面的react组件包括： js ：

document.addEventListener('DOMContentLoaded',function(){
window.onscroll = function(){myFunction()};
var header = document.getElementById("projectHeader");
var sticky = header.offsetTop;

function myFunction() {
    if (window.pageYOffset > sticky) {
      header.classList.add("sticky");
    } else {
      header.classList.remove("sticky");
    }
} });

这是组件功能：

function Project(){
    return(
    <div>
        <div class="headeings" id="projectHeader">
        <h1>Projects</h1>
        </div>
        <div class="content">
        <p>1</p>
        <p>2</p>
        </div> 
    </div>
    );
}
export default Project;

和 CSS ：

.headeings {
  padding: 10px 16px;
  background: rgb(128,90,90);
}

.headeings  h1{
  background: rgb(128,90);
  font-size: 30px;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

.content {
  padding: 16px;
}

.sticky + .content {
  padding-top: 102px;
}

我是Web开发的新手，我真的不知道问题出在哪里。 请帮忙！ 谢谢