Question

我在div中设置了一个带有固定侧边菜单的网页，其中包含以下css样式：

div#sidemenu
{
  top: 120px; left: 800px;
  width: 135px; 
  height: 560px;
  background-image: url(img/bg.png);
  position: fixed;  
  z-index: 30;
}

div很简单：

<div id="sidemenu">
<ul>
<li>link1</li>
...
<li>linkn</li>
</ul>
</div>

向下滚动页面时应保持固定状态。

适用于Windows和MacOS上的所有非Safari浏览器（IE，FF，OP），即使在Windows版本的Safari中 - 但不适用于MacOS Safari。

在MacOS Safari中，它会保持固定状态，但在滚动时会跳跃/颤抖/上下抖动。

我研究了这个问题一段时间，比较了css能力，降低了z-index并试图在底部修复。似乎没什么用。

有没有人经历过这样的事情？并且：你能解决它吗？

其他信息：

bg图像是带透明胶片的png
bg图像的大小与容器div一样大小

Answer 1

我在跳跃bg图像方面有类似的经验，而且似乎是跨浏览器的一种解决方法是在包装div中添加div。重要的是给新div一个高度，否则移动safari可能会调整滚动。

<div id="sidemenu">
<div id="bg"></div>
<ul>
<li>link1</li>
...
<li>linkn</li>
</ul>
</div>
div#sidemenu
{
  top: 120px; left: 800px;
  width: 135px; 
  height: 560px;
  position: fixed;  
  z-index: 30;
}

#bg {
    z-index: -1;
    position: fixed;
    top: 0;
    left: 0;
    right:0;
    height: 500px;
    background-image: url(img/bg.png);
    background-position: 0 0;
}

固定项目在滚动时跳转 - 仅在MacOS Safari中

1 个答案: