固定的导航栏重叠内容

Question

我有一个固定的导航栏，但有时也会隐藏。 这是小提琴http://jsfiddle.net/edsm3g8o/ ，并且nav_header覆盖了couple_text。 我尝试将padding-top添加到couple_text中，但是当nav_bar隐藏时，顶部似乎有很多空白。

<ul class="nav_header">
    <li class="three liMoreShopping" style="display: table-cell;">
        <a class="btnMoreShopping ui-link"><span>More Shopping</span></a>
    </li>
    <li class="three liCheckout" style="display: table-cell;">
         <a class="btnCheckout ui-link"><span>Checkout</span></a>
    </li>
    <li class="three liCart" style="display: table-cell;">
         <a class="btnCart ui-link"><span>Cart (1)</span></a>
    </li>
</ul>
<div class="couple_text">
    <h3>Jane Doe, John Doe</h3>
</div>

Answer 1

我确定还有另一种（更好的？）解决方案，但是如果您使用Javascript触发导航栏的出现/消失，也许您可​​以对其进行修改以切换填充，因此当导航栏被隐藏时它不会显示并不需要。