Question

我正在尝试修复我编写的代码。它有效但当我向下滚动页面时根本不光滑！

<div class="container">
        <div data-spy="affix" data-offset-top="30">
            <div id="nav" class="navbar navbar-default" role="navigation">
                <div class="container">
                    <div class="navbar-header">
                        <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>
                        <a class="navbar-brand" href="#">Project name</a>
                    </div>
                    <div class="navbar-collapse collapse">
                        <ul class="nav navbar-nav">
                            <li><a href="index.html">Home</a></li>
                            <li class="active"><a href="grid_test.html">Grid Test</a></li>
                            <li><a href="jumbotron.html">Jumbotron</a></li>
                        </ul>
                    </div><!--/.nav-collapse -->
                </div><!--/.container -->
            </div><!--/.navbar -->
        </div><!--/.data-spy-->

        <div class="page-header">
            <h1>Bootstrap grid test</h1>
            <p class="lead">Lo-fi ethical quinoa nesciunt. Esse fugiat sapiente fixie squid. Blog Etsy deserunt Brooklyn, meggings banh mi in post-ironic narwhal ad nihil Pinterest butcher nostrud. Cillum laborum pork belly authentic. Truffaut enim pop-up farm-to-table semiotics tattooed. Literally nisi duis, gluten-free Helvetica cornhole irony lo-fi. Et seitan literally paleo small batch cillum.</p>
        </div>

    </div>

我没有使用任何类型的脚本，除了Bootstrap使用的脚本

Answer 1

嗯，根据您的评论，问题在于，通过将.affix分配给.nav，该元素会被分配position:fixed;，从而将其从流中删除。您需要通过在以下元素上添加额外的余量来解决这个问题，以解决这个问题。

.affix + div {
    margin-top:60px;
}
.affix + .page-header {
    margin-top:100px;
}

您可能需要调整它以使其“完美”。

<强> Fiddle

Bootstrap粘性导航栏平滑滚动

1 个答案: