jquery - 位置固定栏确实滚动

Question

我得到了它的一部分工作。但由于某种原因，它不会保持在顶部。

CSS 导航框:

#navbox {
        float: left;                
        width: 150px;
        border: 1px solid blue;
        border: thin solid #CCC;
        background-color: #FFF;
        border-radius: 4px;
        padding: 5px; 
        position: fixed;
        top: 92px;  
        z-index: 1000;
    }

HTML 代码:

<div id="navbox">
    <div class="navigation">
      <a href="#aeast">AFC East</a> <br />
      <a href="#anorth">AFC North</a> <br />
      <a href="#asouth">AFC South</a> <br />
      <a href="#awest">AFC West</a> <br />
    </div>
</div>

当它没有滚动时。 当我滚动时 我猜这与 top 有关。

它在一个中间部分的容器中。

容器是:

#container {
    width: 870px;
    margin-top: 12px;
    margin-left: auto;
    margin-right: auto;                                         
}

Answer 1

此处唯一的选择是使用 JavaScript 在使元素 position: fixed; 之前确定滚动位置。我推荐ScrollToFixed因为它支持边界和边距。

更新:

您可以使用 position: sticky;(以及浏览器前缀)[ reference ] 为了以更有创意的方式做到这一点，尤其是针对 iOS 修复它。