jquery - 如何使导航栏不重叠内容？ Navbar-static-top 有效，但不能固定滚动

Question

我的导航栏有问题。我目前正在使用 asp.net。

当我使用 navbar-fixed-top 类时，导航栏变为可固定滚动(向下滚动页面时显示在顶部)，但导航栏与 contentplaceholder 中的内容重叠

然后，我将类更改为 navbar-static-top，导航栏不再与内容重叠，但导航栏不再变为固定可滚动。

如何使我的导航栏随着我的页面向下滚动，但又不与我的内容重叠？

这是我的代码:

div class="navbar navbar-inverse navbar-static-top navbar-default " style ="color:white" id ="content1">

        <div class="container" style ="color:white">
            <div class="navbar-header" style ="color:white">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <div class ="navbar-brand" style ="font-family:'Bradley Hand ITC'; font-weight:900; font-size:300% ; color:white">
                    <asp:LinkButton ID="Shoppo" runat="server" OnClick="Shoppo_Click" Font-Bold="True" ForeColor="White" ValidationGroup="B">Shoppo</asp:LinkButton> </div>
             <!--   <a class="navbar-brand"  style ="font-family:'Bradley Hand ITC'; font-weight:900; font-size:250%" runat="server" href="~/Welcome">Shoppo</a> -->

            </div>
            <div class="navbar-collapse collapse" style="font-family:Calibri; color:white; font-size:120%" aria-disabled="False" aria-hidden="False" aria-live="off" aria-required="False">
                <asp:LoginView runat="server" ViewStateMode="Disabled">
                    <AnonymousTemplate>
                        <ul class="nav navbar-nav navbar-right">
                            <li>
                                <asp:LinkButton ID="Womens" runat="server" OnClick="Womens_Click" ForeColor="#FF3399" ValidationGroup="B">Women's</asp:LinkButton></li>
                            <li>
                                <asp:LinkButton ID="Mens" runat="server" OnClick="Mens_Click" ForeColor="#0099FF" ValidationGroup="B">Men's</asp:LinkButton></li>
                            <li> <asp:LinkButton ID="Search" runat="server" OnClick="Search_Click" ForeColor="White" ValidationGroup="B">Search</asp:LinkButton> </li>
                            <li> <asp:LinkButton ID="Register" runat="server" OnClick="Register_Click" ForeColor="White" ValidationGroup="B">Register</asp:LinkButton></li>
                            <li>
                                <asp:LinkButton ID="Login" runat="server" OnClick="Login_Click" ForeColor="White" ValidationGroup="B">Login</asp:LinkButton> </li>
                        </ul>

                    </AnonymousTemplate>

                    <LoggedInTemplate>
                        <ul class="nav navbar-nav navbar-right">
                            <li><a runat="server" href="~/Account/Manage" title="Manage your account">Hello, <%: Context.User.Identity.GetUserName()  %>!</a></li>
                            <li>
                                <asp:LoginStatus runat="server" LogoutAction="Redirect" LogoutText="Log off" LogoutPageUrl="~/" OnLoggingOut="Unnamed_LoggingOut" />
                            </li>
                        </ul>
                    </LoggedInTemplate>

                </asp:LoginView>
           </div>
            <div class =" row " style=" border: 20px; color: white">
     <div>     
<ul class="nav navbar-nav" >
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Page 1</a></li>
  <li><a href="#">Page 2</a></li>
  <li><a href="#">Page 3</a></li>
</ul>
</div> 
    </div>
            </div>

            </div>



    <div class="container body-content" >
        <asp:ContentPlaceHolder ID="MainContent" runat="server">

        </asp:ContentPlaceHolder>
        <hr />
        <footer .....

Answer 1

您是否向 body 标签添加了填充(等于导航栏的高度)？

您的 CSS 应该包含类似...

body {
    padding-top: 60px;
}