当我将导航栏滚动并固定在顶部时,它具有不稳定的移动效果

时间:2016-04-10 01:48:09

标签: css html5 twitter-bootstrap navbar responsive

我正在使用模板,当导航栏固定在顶部时,导航栏有一个奇怪的动作。我正在使用bootstrap。 在这里,您可以看到有关情况的小视频:http://i.imgur.com/trrmJj7.gifv

我尝试将菜单的颜色更改为黑色,因此它也固定为黑色,但仍然具有相同的效果。在各种浏览器中也尝试过。这不是固定的,还是一个错误?

这是我的HTML:

global

和CSS:

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

1 个答案:

答案 0 :(得分:1)

从您的css中删除属性为bottom: 0的属性#menu。然后它应该工作正常。