附加的顶部导航栏涵盖了锚点的内容

Question

这是一个使用bootstrap scrollspy和affix在内容中固定导航栏和锚点的着陆页。我通过数据属性在我的顶部导航栏上添加了词缀。一切都运作良好，除了贴上顶部导航栏覆盖内容的顶部。

目前就是这样：

这应该是这样的：

navbar代码：

<!-- navbar section -->

<nav id="navbar-scrollspy" class="navbar navbar-default" data-spy="affix" data-offset-top="58" data-offset-bottom="200">
    <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div id="navbar" class="collapse navbar-collapse" aria-expanded="false" style="height: 1px;">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#first_round"><strong>ГЛАВНАЯ</strong></a></li>
                <li><a href="#second_round">КАК ЭТО <strong>РАБОТАЕТ</strong></a></li>
                <li><a href="#third_round">КАК ПОЛУЧИТЬ <strong>ЗАЙМ</a></strong></li>
                <li><a href="#fourth_round">КАК ВЕРНУТЬ <strong>ЗАЙМ</a></strong></li>
                <li><a href="#fifth_round">ОТЗЫВЫ <strong>О НАС</a></strong></li>
            </ul>
        </div>
    </div>
</nav>

以下是实例：http://zaim.wvb.io/

Answer 1

请记住，滚动时，navbar-scrollspy元素会更改其类。使用屏幕顶部的滚动，可用类为class="navbar navbar-default affix-top"向下滚动一下后，类将更改为{{1}因为该顶部元素从class="navbar navbar-default affix"翻转到position: relative，所以底部边距变得不稳定。

我宁愿看到你向position: fixed添加一个上边距（45px？），并从类class="container form-itself"（从45px减少到0）减少边距底部。这样可以保护你无处不在。

糟糕。说到了不稳定。同样的菜单需要在移动设备上做一些工作，但我猜你还没到那里。我分享你的痛苦。