修复了在 Safari 中滚动回顶部时菜单与内容重叠的问题

Question

我的网站有一个固定的水平菜单。在 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;
}

The site

Answer 1

是因为你有一个fixed类在下面div标签上开关

<div class="contain-to-grid sticky fixed">

根据页面的行为方式判断，fixed 类是由 javascript 处理程序设置的。我会设置它，所以它总是存在的。这将解决这个问题。