固定的顶部导航栏覆盖了锚点的内容

Question

这是一个具有固定导航栏和锚定内容的登陆页面，使用的是bootstrap scrollspy和affix。 我通过数据属性在顶部导航栏上添加了词缀。 一切正常，除了附加的顶部导航栏覆盖内容的顶部。

现在是这样的：

这应该是这样的：

导航栏代码：

<!-- 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"在向下滚动后，这些类将更改为class="navbar navbar-default affix"因为该顶部元素从position: relative对于position: fixed翻转，所以底部页边距变得不稳定。

我宁愿看到您在class="container form-itself"添加页边距顶部（45px？），并从类navbar中将页边距底部减小（从45px减少到0）。 那将保护您到处。

哎呀。 说到古怪 相同的菜单需要在移动设备上进行一些工作，但我想您还没有到达那里。 我分担你的痛苦。