jquery - 滚动时引导菜单覆盖 Div 的标题

Question

我正在为我的网页使用 Bootstrap 菜单，但是当我点击第二个菜单时，他覆盖了 DIV 的标题，如图所示。

HTML代码:

<nav class="navbar navbar-default navbar-fixed-top top-nav-collapse navbar-out-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="index.html">
                    <img src="https://placehold.it/153X50">
                </a>                    
            </div>
            <div class="navbar-collapse collapse" aria-expanded="false" style="height: 0px;">
                <ul class="nav navbar-nav navbar-right">                 
                    <li class="scroll"><a href="#home">Home</a></li>
                    <li class="scroll active"><a href="#services">Menu 1</a></li>                     
                    <li class="scroll"><a href="#doctors">Menu 2</a></li>
                    <li class="scroll"><a href="#about-us">Menu 3</a></li> 
                    <li class="scroll"><a href="#gallery">Gallery</a></li>
                    <li class="scroll"><a href="#contact">Contact</a></li>       
                </ul>
            </div>
        </div>
    </nav>

CSS 代码:

@media(min-width:767px) {
.navbar {
    padding: 20px 0;
    -webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
    -moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
    transition: background .5s ease-in-out,padding .5s ease-in-out;
}


}

我可以用 jQuery 解决这个问题吗？

Answer 1

给该部分填充
例如:

#services {
   padding:100px 0;
}

内边距必须大于导航栏高度