Question

我有一个粘性导航条，我使用Twitter bootstrap。当我滚动某个点时，我会显示粘性导航栏，但是当它显示时，我的内容会跳起来。我想要的是我的内容留在原地而不是跳。

我的HTML

<body>
  <div class="top_menu_wrapper">
    <div class="toggle_wrapper">
      <ul>
        <li>
          <div class="main_menu_header">
            <div class="navbar-header">
              <button class="navbar-header collapsed move-navtoggle" 
                      data-target="#main-menu" data-toggle="collapse" 
                      type="button">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div id="main-menu" class="collapse navbar-collapse main_menu">
      <ul class="nav navbar-nav home-nav">
        <li class="nav_item">
          <a href="#">About Us</a>
        </li>
        <li class="nav_item">
          <a href="#">Services</a>
        </li>
        <li class="nav_item">
          <a href="#">News & Events</a>
        </li>
        <li class="nav_item">
          <a href="#">Volunteer</a>
        </li>
        <li class="nav_item">
          <a href="#">Donate</a>
        </li>
        <li class="nav_item">
          <a href="#">Contact Us</a>
        </li>
      </ul>
      <div class="clearboth"></div>
    </div>
  </div>
  <div class="content">
    <p>some content</p>
  </div>
</body>

我的JS

$(window).scroll(function () {
    if ($(window).scrollTop() > 186) {
        $('.top_menu_wrapper').addClass('navbar-fixed-top').css({
            margin: '0 auto',
            width: '1024px',
            'border-top': '6px solid #6097dd'
        });
    } else {
        $('.top_menu_wrapper').removeClass('navbar-fixed-top').css({
            width: '100%',
            'border-top': 'none'
        });
    }
});

我尝试制作一个jsfiddle，但我无法复制我的错误。 JSFIDDLE

Answer 1

只需从.home-nav移除身高即可。 .home-nav的高度很小，导航内容很大。弹跳即将到来，因为首先显示完整导航，然后隐藏高度与我们联系。导致反弹。

.home-nav {
    float: right;
}

Answer 2

我设法解决了这个问题。我必须在菜单div周围放置另一个包装器，并将该高度设置为与菜单相同的高度。它起作用了。

粘性导航栏使内容跳转

2 个答案: