Bootstrap导航栏在顶部固定时反复跳转 [英] Bootstrap navbar jumps repeatedly when fixing on top

问题描述

我使用的是一个模板，navbar从第一页的底部开始，当它在scriolling后固定在顶部时，有一个奇怪的运动。我使用bootstrap。
在这里，您可以看到一个有关情况的视频： http://i.imgur.com/ trrmJj7.gifv

我试图将菜单的颜色更改为黑色，所以它也修复为黑色，但它仍然有相同的效果。也试图在各种浏览器。

这是我的HTML：

 < div id =menu> 
< nav class =navbar navbar-defaultrole =navigation> 
< div class =container> 
<！ - 品牌和切换获得分组，更好的移动显示 - > 
< div class =navbar-header> 
< button type =buttonclass =navbar-toggle
 data-toggle =collapsedata-target =＃menu-content> 
< span class =sr-only>切换导航< / span> 
< span class =icon-bar>< / span> 
< span class =icon-bar>< / span> 
< span class =icon-bar>< / span> 
< / button> 
< a class =navbar-brandhref =＃> 
< img src =img / other / 03_Logo.png> < span> BRAND< / span> 
< / a> 
< / div> 
 
<！ - 收集导航链接，表单和其他内容toggling  - > 
< div class =collapse navbar-collapseid =menu-content> 
< ul class =nav navbar-nav navbar-right> 
< li>< a href =＃>首页< / a>< / li& 
< li>< a href =＃service>服务< / a>< / li> 
< li>< a href =＃experience>个人资料< / a>< / li> 
< li>< a href =＃portfolio> Portfolio< / a>< / li> 
< li>< a href =＃testimonial>见证< / a>< / li> 
< li>< a href =＃contact>联系人< / a>< / li> 
< / ul> 
< / div><！ -  /.navbar-collapse  - > 
< / div><！ -  /.container-fluid  - > 
< / nav> 
< / div> 
  

和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; }正如Bruno上面所述，这是一个问题，它是一个问题，它是一个问题。 Bootstrap 
 
 
 
是的，我现在看到了，我发现很多资源记录了这个问题与bootstrap，但我不知道如何解决它。 Bruno 8分钟前
 
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; }

解决方案
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 "

                        
这篇关于Bootstrap导航栏在顶部固定时反复跳转的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！