在滚动中的Rails应用程序中缩小Bootstrap导航栏

Question

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

我不确定自己在做什么错，但是导航栏并没有在滚动时缩小。

这是代码

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

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

您缺少部分结尾的</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>

Answer 2

在这里您可以找到干净的scss代码。 答案中的代码段使用全前缀的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>