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

Question

我正在尝试缩小 Rails 应用程序中的 Bootstrap 导航栏。我希望解决方案类似于此页面上的导航栏 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 代码。答案中的片段使用完全前缀的 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>