CODEWITHSUNDEEP
twitter-bootstrap
iDiot
iDiot

Reputation: 5

Bootstrap sticky navbar smooth scroll

I'm trying to fix this code i've written. It works BUT isn't smooth at all when I scroll down the page!

<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>

I'm not using any kind of script except for those used by Bootstrap

Upvotes: 0

Views: 3733

Answers (1)

Giovanni Silveira
Giovanni Silveira

Reputation: 1281

Well, from your comments, the problem is that by assigning .affix to .nav, that element gets assigned a position:fixed;, which removes it from the flow. You would need to counter that by putting additional margin on the following element, to counter that issue.

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

You might need to tweak it to get it "perfect".

Fiddle

Upvotes: 1

Related Questions