使用position:fixed时保留原有位置空间

<div class="tabNav tabFixedTop">
    ...
</div>


<style>
    .tabFixedTop {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 99;
    }
</style>

场景：当页面滚动到指定位置时，将页面中的导航条固定在顶部；

Fixed定位使元素的位置与文档流无关，因此不占据空间，，所以当导航条固定的瞬间 下方的元素会顶上来，页面效果看上去像跳了一下，不流畅；

解决方案：给要使用fixed定位的元素外面包一层固定高度的div；

<div style="height:20px;">
    <div class="tabNav tabFixedTop">
        ...
    </div>    
</div>