css - 当滚动和固定我的导航栏在顶部时,它有一个不稳定的移动效果

标签 css html twitter-bootstrap navbar responsive

我正在使用一个模板,当它固定在顶部时,导航栏有一个奇怪的 Action 。我正在使用 Bootstrap 。 在这里你可以看到一个小视频:http://i.imgur.com/trrmJj7.gifv

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

这是我的 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>

还有 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; }

最佳答案

从你的 CSS 中删除属性 bottom: 0 给 id #menu。那么它应该可以正常工作。

关于css - 当滚动和固定我的导航栏在顶部时,它有一个不稳定的移动效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36524825/

相关文章:

jquery - Bootstrap 折叠数据父级不起作用

jquery - 如何在滚动后将图像粘贴到顶部,并在页面向下滚动到页脚后将其滚动到 View 之外?

javascript - NSIWebBrowserPersist的saveDocument()函数

css - Bootstrap 3 响应式 h1 标签

javascript - 使用javascript onclick放大图像

php - 如何在 PHP 中显示警告框?

html - 将图标化链接添加到最小化的 twitter Bootstrap 导航栏

jquery - 更改嵌入式小部件的CSS

html - 用于格式化学术出版物APA样式的CSS

javascript - 使用 "span"元素创建基于 Web 的自定义文本编辑器——一个坏主意?