Question

我有一个Bootstrap Navbar，它使用.affix类，偏移量为100px。默认情况下，导航栏列表项在栏中居中。当触发.affix类时，我让jQuery在左侧导航栏中显示navbar-brand并将列表项向右推。当您在100px内向上滚动时，导航栏品牌消失，列表项应该返回到中心，但它们稍微偏离中心。我创建了一个codepen，但由于某种原因，它在codepen中实际上运行良好。

Codepen：http://codepen.io/Tambe257/pen/WwYoEO

如果我点击一个菜单项，他们会自行居中，让我再次点击并点击链接。这是代码：

HTML：

<header>
<div class="container">
  <div class="header-info">
    <h1><span class="heavy">John Doe</span> Rosenthal</h1>
    <h2>Licensed Real Estate Salesperson</h2>
    <img src="img/coach-logo.png" alt="Logo">
  </div>
</div>
</header>

<!--     nav      -->
<div class="nav-wrapper">
 <nav class="navbar navbar-default" id="nav">
  <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <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="index.html">Home</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav" id="right-nav">
        <li><a href="#current-listings" class="page-scroll">Current Listings</a></li>
        <li><a href="sales.html" class="page-scroll">Sales Gallery</a></li>
        <li><a href="#about" class="page-scroll">About John Doe</a></li>
        <li><a href="#contact" class="page-scroll">Get In Touch</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

CSS：

#nav.affix {
position: fixed;
top: 0;
width: 100%;
}

.navbar {
margin: 0;
background: $maroon;
@include border-radius(0px);
z-index: 5;

a {
  color: $white;
}

a.navbar-brand {
 display: none;
 font-family: $main-font;
 font-size: 24px;
 font-weight: 700;
 -webkit-transition: all 0s ease-in-out;
 -moz-transition: all 0s ease-in-out;
 transition: all 0s ease-in-out;
 }

 a.navbar-brand:hover {
 color: $white * 0.7;
 font-size: 24px;
 }

li {
 float: none;
display: inline-block;

a, a.page-scroll {
  color: $white;
  font-size: 1.6rem;

  &:visited, &:focus {
    color: $white;  
  }

  &:hover {
    color: $white * 0.7;
  }
 }
}

}

.navbar-default, .navbar-collapse {
 border: none;
}

.navbar-default .navbar-nav>li>a {
 color: $white;
 font-size: 1.6rem;

&:hover {
color: $white * 0.7;
}
}

.nav-wrapper {
 min-height: 50px;  
}

.navbar-default .navbar-brand, .navbar-default .navbar-brand:focus,     .navbar-default .navbar-brand:hover {
color: $white;
font-size: 1.6rem;

 &:hover {
 color: $white * 0.7;
}
}

.navbar-nav {
 float: none;
 text-align: center;
}

jQuery的：

$('#nav').affix({


offset: {
    top: 100
  }
});

$(document).on('scroll', function() {
  $('#nav').each(function(){
    if($(this).hasClass('affix')) {
      $('.navbar-brand').fadeIn(500);
      $('#right-nav').addClass('navbar-right');
    } else {
      $('.navbar-brand').fadeOut(500);
      $('#right-nav').removeClass('navbar-right');
      $('navbar-nav').attr('float: none', 'text-align: center');
    }
  });
});

也许只是编写jQuery的更好方法。同样，它在codepen中正常工作，但在任何浏览器中都不行。

Answer 1

好的，我弄清楚问题是什么，而且比我预想的要容易。它实际上发生在我上面发布的Codepen中，但它只略微偏离中心，所以它并不明显。

问题是我正在淡出导航栏品牌超过500毫秒，但导航栏的中心立即发生。 navbar-nav尽可能地到达中心，然后碰到导航栏品牌，它仍然没有完成淡出，并停止。

如果我将jQuery更改为.hide（），它可以正常工作：

$(document).on('scroll', function() {


$('#nav').each(function(){
    if($(this).hasClass('affix')) {
      $('.navbar-brand').fadeIn(500);
      $('#right-nav').addClass('navbar-right');
    } else {
      $('.navbar-brand').hide();
      $('#right-nav').removeClass('navbar-right');
      $('navbar-nav').attr('float: none', 'text-align: center');
    }
  });
});

jQuery Navbar li在滚动中对齐中心

1 个答案: