Bootstrap navbar from static to fixed eating content/jittery effect

Question

So I already looked at some previous answers like:

bootstrap static to fixed navbar jumping on scroll

How to Bootstrap navbar static to fixed on scroll?

But they don't seem to address the central issue that is how jittery it all looks. I have added padding as said in the official bootstrap navbar docs and in the first link I put but it still makes it look off when it becomes fixed. I'm hoping there is a way to make the conversion to fixed be as smooth as possible.

Here is my jsfiddle with my code:

JS:

//Adds smooth scrolling to page start
$("#scrollToMain a").on("click", function (e) {
    e.preventDefault();
    var hash= this.hash;
    $('html, body').animate({
        scrollTop: $(hash).offset().top
    }, 700, function() {
        window.location.hash = hash;
    });
});

$(window).scroll(function () {
    //Checks to see if the nav button is fully visible
    if(!$("#scrollToMain").visible(true)) {
        $(".navbar").addClass("navbar-fixed-top");
    } else {
        $(".navbar").removeClass("navbar-fixed-top");
    }
});

HTML:

 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
              <ul class="nav navbar-nav">
                <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
                <li><a href="#">Link</a></li>
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                  <ul class="dropdown-menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a href="#">Separated link</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a href="#">One more separated link</a></li>
                  </ul>
                </li>
              </ul>
              <form class="navbar-form navbar-left" role="search">
                <div class="form-group">
                  <input type="text" class="form-control" placeholder="Search">
                </div>
                <button type="submit" class="btn btn-default">Submit</button>
              </form>
              <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Link</a></li>
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                  <ul class="dropdown-menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a href="#">Separated link</a></li>
                  </ul>
                </li>
              </ul>
            </div><!-- /.navbar-collapse -->
          </div><!-- /.container-fluid -->
        </nav>


        <div class="jumbotron" id="startContent" style="width:100%; background-color:yellow;"><h1>I am here now</h1>
        <h1>Me too</h1><h1>Me three!</h1><h1>Me three!</h1><h1>Me three!</h1><h1>Me three!</h1><h1>Me three!</h1><h1>Me three!</h1><h1>Me three!</h1><h1>Me three!</h1><h1>Me three!</h1><h1>Me three!</h1><h1>Me three!</h1><h1>Me three!</h1></div>

https://jsfiddle.net/6z492Lry/

Problem occurs on the jump when you go down the page, when the navbar becomes fixed it's very noticeable. I would like this transition to be smooth. Don't click the arrow as the auto scroll hides the issue.

Thanks

It's only really noticeable on a slow scroll, and the padding solution doesn't make it as responsive in all cases — John Crash, Jul 21 '16 at 07:09

score 1 · Accepted Answer · answered Jul 21 '16 at 07:37

The effect is there because when you make your nav fixed your other content is shifted up.

You can make another element that will have same height as your nav and display it only when nav is fixed.

CSS

.navbar-fill-space {
  height: 50px;
}

HTML

<div class="navbar-fill-space hidden"></div>        
<nav class="navbar navbar-inverse navbar-transparent">

JS

$(window).scroll(function () {
    //Checks to see if the nav button is fully visible
    if(!$("#scrollToMain").visible(true)) {
        $(".navbar").addClass("navbar-fixed-top");
        $(".navbar-fill-space").removeClass("hidden");
    } else {
        $(".navbar").removeClass("navbar-fixed-top");
        $(".navbar-fill-space").addClass("hidden");
    }
});

jsFiddle

Thank you so much, I hadn't thought of making a hidden elem whose sole purpose was that. I don't think I can close answers at my level but this fixed it!! Thanks a lot — John Crash, Jul 21 '16 at 07:49

Bootstrap navbar from static to fixed eating content/jittery effect

1 Answers1