css - 固定位置无法在 chrome 中向下滚动 - 检查器设备

Question

我认为这很奇怪，但是当我使用 Chrome 工具在检查器网络上测试我的网站时，我在 position:fixed 中的 header 不起作用。在所有其他浏览器和屏幕维度上工作良好。仅在检查器网络中不起作用。

.site-header{ display: block;}
.header-top{
	background-color: #87b7bb;
	height: 90px;
	position: fixed;
	width: 100%;
	z-index: 1;
		-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.66);
    -moz-box-shadow: 0px 00px 10px 0px rgba(0,0,0,0.66);
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.66);
}
.block{
    position:static;
 background-color: #000;
   height:1000px;
  width:100%;
}

<div class="site-header" >
		<div class="header-top">
		</div>
</div><!-- #masthead -->
<div class="block">
 <p> 

 </p>
</div>

当我使用检查器工具时，我可以更改所有设置并看到更改，但固定位置不起作用。

此外，只有向下滚动时才会发生这种情况。当我向上滚动时，我看到标题以正确的方式在我的窗口顶部移动。

有人可以帮助我吗？

Answer 1

您是否尝试过将 top: 0 添加到您的 .header-top？

此外，代替 width 100%

你试过用下面的吗

.header-top{
  background-color: #87b7bb;
  height: 90px;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 1;
  -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.66);
  -moz-box-shadow: 0px 00px 10px 0px rgba(0,0,0,0.66);
  box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.66);
}