滚动时缩小 Rails 应用程序中的引导导航栏

Question

我正在尝试缩小 Rails 应用程序中的引导导航栏。我希望解决方案类似于此页面上的导航栏http://www.viegandmaagoe.dk/en/

我不确定我做错了什么，但我的导航栏没有在滚动时缩小。

这里是代码

app/application/_navbar.html.erb

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<!-- 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="#">Circular</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 navbar-right">
    <li><%=link_to "About", root_path(@root, :anchor => "about") %><span class="sr-only">(current)</span></li>
    <li><%=link_to "Ems", root_path(@root, :anchor => "ems") %></li>
    <li><%=link_to "Team", root_path(@root, :anchor => "team") %></li>
    <li><%=link_to "Contact", root_path(@root, :anchor => "contact") %></li>
  </ul>

</div><!-- /.navbar-collapse -->

这是app/assets/javascript/application.js中的代码

$(document).scroll(function() {
 if ($(document).scrollTop() > 50) {
 $('nav').addClass('shrink');
 } else {
 $('nav').removeClass('shrink');
 }
});

这是app/assets/stylesheets/navbar.scss中的Css

nav.navbar{
 background-color:#fff;
 // Animation
 -webkit-transition: all 0.4s ease;
 transition: all 0.4s ease;
}


nav.navbar.shrink {
 min-height: 35px;
}

如果有人可以看看这个并建议我，那就太好了

提前致谢

Answer 1

Here 你可以找到干净的scss 代码。答案中的 sn-p 使用完全前缀的 css 结果（如果您通过 grunt 或 gulp 运行代码，则不需要它。

如果它对您不起作用，也许您应该创建一个示例来展示您当前的非收缩导航栏的外观，这样我就可以看到我需要为哪些属性设置动画才能使收缩过渡起作用。

$(document).scroll(function() {
  if ($(document).scrollTop() > 50) {
    $('nav').addClass('shrink');
  } else {
    $('nav').removeClass('shrink');
  }
});

    body {
  min-height: 150vh; }

  .navbar-brand img {
    max-height: 120px;
    -webkit-transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    -o-transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    -moz-transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
    .navbar-default.shrink .navbar-brand img {
      max-height: 45px; }
  @media (max-width: 767px) {
    .navbar-brand {
      float: none;
      display: inline-block;
      padding: 0 15px;   }
      .navbar-brand img {
        max-height: 45px;
        display: inline-block;
        margin: 15px auto;   }
}

.navbar-default .navbar-nav > li > a {
  line-height: 120px;
  -webkit-transition: line-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  -o-transition: line-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  -moz-transition: line-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transition: line-height 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
  @media (max-width: 768px) {
    .navbar-default .navbar-nav > li > a {
      line-height: initial;   }
}
.navbar-default.shrink .navbar-nav > li > a {
  line-height: 45px; }
  @media (max-width: 768px) {
    .navbar-default.shrink .navbar-nav > li > a {
      line-height: initial;   }
}

@media (max-width: 767px) {
  .navbar-default .navbar-toggle {
    margin: 20px 8px;   }
}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#"><img src="https://www.grouptravelvideos.com/images/client/00954/resources/you%20logo%20here.png" /></a>
      <!-- Brand and toggle get grouped for better mobile display -->
      <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>
    </div>
  </div>

  <!-- Collect the nav links, forms, and other content for toggling -->
  <div class="collapse navbar-collapse" id="navbar">
    <ul class="nav navbar-nav navbar-right">
      <li><a href="/about"><span class="sr-only">(current))</span>About</a></li>
      <li><a href="/ems">Ems</a></li>
      <li><a href="/team">Team</a></li>
      <li><a href="/contact">Contact</a></li>
    </ul>
  </div><!-- /.navbar-collapse -->
</nav>

Answer 2

您在部分末尾缺少关闭 </nav> 和 </div> 标记。如果您关闭它，它将起作用：

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<!-- 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="#">Circular</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 navbar-right">
    <li><%=link_to "About", root_path(@root, :anchor => "about") %><span class="sr-only">(current)</span></li>
    <li><%=link_to "Ems", root_path(@root, :anchor => "ems") %></li>
    <li><%=link_to "Team", root_path(@root, :anchor => "team") %></li>
    <li><%=link_to "Contact", root_path(@root, :anchor => "contact") %></li>
  </ul>

</div><!-- /.navbar-collapse -->
</div>
</nav>