修复了在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;
}

网站

Answer 1

这是因为您在以下div标签上有一类fixed开关

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

通过页面行为来判断fixed的类是由javascript处理程序设置的。 我将其设置为始终存在。 可以解决此问题。