Question

我使用Bootstrap Affix插件创建了一个粘性导航栏。导航栏位于标题下方。向下滚动页面时，一旦导航到达顶部，它就会粘在那里。它工作得很好，到目前为止一直很好。

然而，某些东西不能按我的意愿运作。在导航栏到达顶部的那一刻，其位置从“静态”变为“静态”。修复＆＃39; （原因很明显）。结果是导航下的页面内容无法看到＆＃39;导航栏，从一个滚动像素到另一个滚动像素。（固定后，它移出了流程）。因此，从一个时刻到另一个时刻，页面内容不再看到导航的下边距，并且它将标题作为其前一个元素。

这样做的后果是页面内容突然跳过几行像素（数量等于导航的底部边距）并进行“跳跃”。

见下面的截图，一个在导航到达顶部之前（仍然是静态的），一个在它到达顶部之后（固定）

总而言之，我发现这是可以理解的，CSS可以按预期运行。然而，这不是我想要的。我希望页面内容遵循正常的滚动运动，并且不会跳过一段距离。

我该如何改变？

Navigation static Navigation fixed 标题

<body>
<header class="header container">
<h1>Header</h1>
<h2>Tagline</h2>
<img src="http://lorempixel.com/300/200" />
</header>
   <nav id="main-navigation" class="navbar">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <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="#">Project name</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#products">Products</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

    <div class="container">

      <section id="about">
      <h2>About</h2>
      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at velit eu leo semper pharetra vitae sed nisl. In elementum neque in urna elementum tristique. Sed malesuada risus justo, ut pellentesque enim vehicula vitae. Quisque a nunc et ligula sagittis ullamcorper. Proin eu faucibus eros, id iaculis felis. Praesent vitae dolor a quam accumsan egestas sit amet et sapien. Praesent tincidunt quam id vestibulum sollicitudin. Ut eget sem a diam tempus tempor. </p>
      <p>In elementum neque in urna elementum tristique. Sed malesuada risus justo, ut pellentesque enim vehicula vitae. Quisque a nunc et ligula sagittis ullamcorper. Proin eu faucibus eros, id iaculis felis. Praesent vitae dolor a quam accumsan egestas</p>
      <p>Nunc tempus egestas massa id cursus. Integer vehicula enim et lacus suscipit, at posuere ante ullamcorper. Mauris condimentum eros in luctus blandit. Nam at nibh dignissim libero dictum lacinia lacinia et neque. In viverra lorem id nulla aliquam, vel laoreet est porttitor. Sed congue tincidunt arcu eget cursus.<br />Quisque aliquam laoreet quam et maximus. Pellentesque maximus ullamcorper ante, a elementum est dapibus at. Nulla feugiat leo sed turpis convallis suscipit vel dictum sapien. Vivamus luctus id nulla sit amet fermentum. Praesent sodales viverra enim ut malesuada. Ut in elit bibendum, mollis dui nec, faucibus enim. Vivamus ullamcorper sed augue at lacinia.</p>
      </section>

       <section id="products">
      <h2>Products</h2>
      <p> Nunc mattis mauris quis diam dictum, non tristique diam congue. Vestibulum tincidunt augue a dui interdum facilisis. Donec sed neque id nunc ullamcorper porta quis vitae nibh. Quisque aliquam laoreet quam et maximus. Pellentesque maximus ullamcorper ante, a elementum est dapibus at. Nulla feugiat leo sed turpis convallis suscipit vel dictum sapien. Vivamus luctus id nulla sit amet fermentum. Praesent sodales viverra enim ut malesuada. Ut in elit bibendum, mollis dui nec, faucibus enim. Vivamus ullamcorper sed augue at lacinia. Nunc tempus egestas massa id cursus. Integer vehicula enim et lacus suscipit, at posuere ante ullamcorper. Mauris condimentum eros in luctus blandit. Nam at nibh dignissim libero dictum lacinia lacinia et neque. In viverra lorem id nulla aliquam, vel laoreet est porttitor. Sed congue tincidunt arcu eget cursus.<br />Quisque aliquam laoreet quam et maximus. Pellentesque maximus ullamcorper ante, a elementum est dapibus at. Nulla feugiat leo sed turpis convallis suscipit vel dictum sapien. Vivamus luctus id nulla sit amet fermentum. Praesent sodales viverra enim ut malesuada. Ut in elit bibendum, mollis dui nec, faucibus enim. Vivamus ullamcorper sed augue at lacinia. Nunc tempus egestas massa id cursus. Integer vehicula enim et lacus suscipit, at posuere ante ullamcorper. Mauris condimentum eros in luctus blandit.</p>
      <p>Curabitur posuere ornare enim. Nullam scelerisque vulputate risus, id consequat odio auctor interdum. Etiam eu ligula ut neque semper aliquam ut eget augue. Fusce in volutpat velit, sit amet gravida ipsum. Sed a consectetur nunc. Sed molestie scelerisque nunc nec pellentesque. Aliquam eget malesuada nulla, ut lobortis est.</p>
      </section>

    </div><!-- /.container -->
</body>
</html>

CSS

    @import url("bootstrap/css/bootstrap.min.css");

nav#main-navigation.navbar {
    border-radius: 0;
    border: 0;
}

nav.affix {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    transform: translate3d(0px, 0px, 0px);
    z-index: 1030;
    width: 100%;

Answer 1

刚刚遇到这个问题...不确定它现在是否有帮助，但这是一个CSS解决方法，可以很好地防止“跳”。 css代码在手写笔中，但你得到的图片......

这个想法是，通过绝对定位，词缀栏已经在navbar-wrapper div之外，这样当它被改为固定时就没有“跳跃”。 margin-bottom将保留导航栏间距的空间。请注意，navbar-wrapper具有相对位置，因此词缀类的绝对位置将相对于它并出现在div中。

.navbar-wrapper
 margin-bottom 45px
 position relative    
.affix-top
 position absolute
 top 0
 left 0
 z-index 100
.affix
 position fixed
 top 0

希望这有助于某人。

Answer 2

如果在所有浏览器中显示相同，则可以输入

nav#main-navigation.navbar {
    border-radius: 0;
    border: 0;
    margin-top:-20px;
}

这会将菜单栏稍微移到顶部，希望这能解决你的问题

干杯

Answer 3

@Naveen修复可能有效 - 但你认为它是针对这个问题的语义修复。

关于Bootstrap词缀导航的保证金

3 个答案: