我的网站有一个固定的水平菜单。在 Safari 中查看时，当从较低位置滚动回页面顶部时，菜单后面的元素会在其下方滚动。将等于菜单高度的 margin-top 或 padding-top 添加到内容区域仅在向下滚动后才能解决问题，并在其他浏览器中留下空白区域。我怎样才能防止内容像那样低于菜单？
<div class="contain-to-grid sticky fixed">
<nav class="top-bar" style="">
</nav>
</div>
<div class="content">
<div class="fullWidthBar bar3">
</div>
</div>
CSS
.fixed {
width: 100%;
left: 0;
position: fixed;
top: 0;
z-index: 10010;
}
.contain-to-grid {
width: 100%;
background:
#0D42C0;
border-bottom: 1px solid white;
}
.top-bar {
max-width: 62.5em;
margin: 0 auto;
margin-bottom: 0;
background: #0D42C0;
overflow: visible;
min-height: 45px;
}
.bar3 {
background:
#04297D;
}
.fullWidthBar {
max-width: 100%;
padding-top: 0px;
height: auto;
padding: 2% 0;
}
.row {
width: 100%;
margin-left: auto;
margin-right: auto;
margin-top: 0;
margin-bottom: 0;
max-width: 62.5em;
}