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处理程序设置。我会设置它然后它总是存在。这将解决这个问题。

在Safari中滚动回顶部时，固定菜单会重叠内容

1 个答案: