Bootstrap navbar jumps repeatedly when fixing on top

问题

I am working with a template and the navbar starts at the bottom of the first page, and has a strange movement when it fixes on top after scriolling. I am using bootstrap. Here you can see a little video with the situation: http://i.imgur.com/trrmJj7.gifv

I tried changing the color of the menu to black so it fixes also to black but it still has the same effect. Tried also in various browsers. Cant this be fixed or is it a bug?

Here is my HTML:

<div id="menu">
            <nav class="navbar navbar-default" role="navigation">
                <div class="container">
                    <!-- Brand and toggle get grouped for better mobile display -->
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" 
                            data-toggle="collapse" data-target="#menu-content">
                            <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="#">
                            <img src="img/other/03_Logo.png"> <span>BRAND</span>
                          </a>
                    </div>

                    <!-- Collect the nav links, forms, and other content for toggling -->
                    <div class="collapse navbar-collapse" id="menu-content">
                        <ul class="nav navbar-nav navbar-right">
                            <li><a href="#">Home</a></li>
                            <li><a href="#service">Services</a></li>
                            <li><a href="#experience">Profile</a></li>
                            <li><a href="#portfolio">Portfolio</a></li>
                            <li><a href="#testimonial">Testimonials</a></li>
                            <li><a href="#contact">Contact</a></li>
                        </ul>
                    </div><!-- /.navbar-collapse -->
                </div><!-- /.container-fluid -->
            </nav>
        </div>

And CSS:

#menu {
  width: 100%;
  position: absolute;
  bottom: 0; }
  #menu nav {
    border: medium none;
    background: black;
    margin-bottom: 0px; }
  #menu nav.navbar {
    padding: 10px 0px;
    border-radius: 0; }
    #menu nav.navbar.navbar-fixed-top {
      padding: 5px 0px; }
 #menu nav.navbar-fixed-top {
    background: black; }
  #menu .navbar-brand {
    padding: 15px 0px 0px 15px; }
    #menu .navbar-brand img {
      width: 45px;
      float: left;
      margin-top: -10px; }
    #menu .navbar-brand span {
      float: left;
      display: block; }

回答1:

Try adding -webkit-backface-visibility: hidden; to your navbar.

#menu nav.navbar {
   padding: 10px 0px;
   -webkit-backface-visibility: hidden;
   border-radius: 0;
}

回答2:

As Bruno above states, it is an issue with Bootstrap

"Yeah, I see it now. I found a lot of resources documenting this issue with bootstrap but i'm not sure how to solve it. Good luck. – Bruno 8 mins ago "

来源：https://stackoverflow.com/questions/36549034/bootstrap-navbar-jumps-repeatedly-when-fixing-on-top

标签

html

css

twitter-bootstrap

responsive-design